-
|
This looks interesting but I'm struggling to understand how the pieces go together. Is there a working example somewhere? |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 2 replies
-
|
Hey, not yet sorry! I'll set up one very soon and link it! <!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/gh/rehhouari/[email protected]/dist/complete.umd.js"></script>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
</head>
<body>
<script>
function handle() {
return {
main() {
console.log('main');
},
hello(context) {
console.log('hello,', context.props.name);
},
notfound(context) {
console.error(context.path + ' is not found');
}
};
}
</script>
<div x-data="handle()" x-router>
<template x-route="/hello/:name" x-handler="hello"></template>
<template x-route="/" x-handler="main"></template>
<template x-route="notfound" x-handler="notfound"></template>
</div>
<nav class="">
<a href="/">Home</a>
<a href="/hello/test">Hello</a>
<a href="/about">About</a>
</nav>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for this. I assume I need to also create The links in the nav work to change the URL but how/where do I put the content for the "hello" page? Do I need to something in the handler function to display the new page content? |
Beta Was this translation helpful? Give feedback.
-
|
Oh you mean that! I'll explain it since it isn't clear at all for someone who haven't use client side routing before :) Alpine Router give you 3 options: First option, using x-handlerYou don't need to have a file How? clicking the link don't visit Why? you may have your own method of displaying the content, or you dont want that you want to do something else you can and you get access to the context in the handler to help you. Second option, x-viewsYou want to display content but not an entire page, just a part, for example you have "/profile.html" you want to show it if the user want to view someones profile you can use this: <div x-data x-router x-views>
<template x-route="/profile/:name" x-view="profile.html"></template>
<template x-route="notfounf" x-view="notfound.html"></template>
</div>
<div id="content">
This here will be replaced by the content of `profile.html` if the user visit `/profile/john`.
If the user visit _any path_ but that, it'll show the content of `notfound.html`
</div>notice that there is no need for Third option, x-renderThis will let you render pages in the server, normally but with a twist, You don't need to handle routes or anything, just add this line: <div x-data x-router x-views></div>What this will do:
This result in faster page navigation with no reloads! the server generate the html, the first load is normal, meaning it's SEO friendly. This method is made popular by Turbolinks |
Beta Was this translation helpful? Give feedback.
-
|
there is now: https://pinecone-example.vercel.app |
Beta Was this translation helpful? Give feedback.
there is now: https://pinecone-example.vercel.app