I am learning how to use Routify to wire up some routes and links. I need help.
At the Routify docs it says:
"Links can be handled in an array of different ways. This might be the easiest way".
via: https://routify.dev/guide/navigation
It then gives this example:
<script>
import {isActive, url} from '#sveltech/routify'
const links =
[
['./index', 'Home'], //add index if you don't want siblings to be considered children
['./blog', 'Blog'],
['./about', 'About'],
['./contact', 'Contact']
]
</script>
<style>
.active {font-weight: bold}
</style>
<ul>
{#each links as [path, name]}
<!-- Svelte magic. If isActive is true, the "active" class is applied. -->
<li class:active={$isActive(path)}>
<a href={$url(path)}>
{name}
</a>
</li>
{/each}
</ul>
Unfortunately it doesn't give any instructions on how to wire this up to your app (if it does it's too complex for me to figure out).
I am using the Routify Template and I have copied the above code into the following directory:
pages/_components/Navigation.svelte
I then attempted to import it into pages/index.svelte as so:
pages/index.svelte
<script>
import Navigation from './_components/Navigation.svelte';
</script>
<div>
<Navigation/>
</div>
The links appear at the top of the page. When I click them the endpoint follows this pattern:
http://localhost:5000/index/home
http://localhost:5000/index/blog
http://localhost:5000/index/about
http://localhost:5000/index/contact
In my /pages directory I have pages that match the pages listed in the code such as:
/pages/Home.svelte
When I click the links my browser stays on the same page and does not embed the page associated with the link. Also, my browser developer tools say:
Uncaught Error: Route could not be found for "/index/home".
at urlToRoute (urlToRoute.js:15)
at updatePage (navigator.js:13)
at pushstate (navigator.js:60)
at History.history.<computed> [as pushState] (navigator.js:51)
What do I need to do so that I can see the respective pages and why is their an intermediate directory named "index"? How do I get rid of the word "index" in the url ?
UPDATE
Okay I have the navigation listed on all pages and semi-working.
I have my Navigation code (below) imported into pages/_layout.svelte.
The code is as follows:
pages/_layout.svelte
<script>
import Navigation from './_components/Navigation.svelte';
</script>
<!--TABS-->
<Navigation/>
pages/_components/Navigation.svelte
<script>
import {isActive, url} from '#sveltech/routify'
const links =
[
['./index', 'Home'], //add index if you don't want siblings to be considered children
['./form', 'Form']
]
</script>
<style>
.active {font-weight: bold}
</style>
<ul>
{#each links as [path, name]}
<!-- Svelte magic. If isActive is true, the "active" class is applied. -->
<li class:active={$isActive(path)}>
<a href={$url(path)}>
{name}
</a>
</li>
{/each}
</ul>
The navigation links appear but the problem now is that the content of the selected page does not appear.
In the image below, the form endpoint is being rendered. The form component has working HTML but the HTML does not appear on the page.
I am also getting a warning my my developer tools that says: " received an unexpected slot "default"
You shouldn't import your Navigation component into the index.svelte file but instead into a _layout.svelte file in the same directory.
They show the setup in the TV Shows App and although they don't show the above code imported in a Nav file like you're trying it will work if the component with the above code is imported in the _layout file since the url helper resolves paths relative to the page/layout in which it's used.
Importing it into the index file creates paths relative to the index file which is why you're seeing index in all routes.
UPDATE:
In response to needing to render the content of each page. This is done using a slot in the _layout file, in your example it would look like this:
<Navigation/>
<main>
<slot />
</main>
Related
I know it has been explained in many places here but I can't get it to work.
It concerns: how to use JavaScript which is in - under wwwroot created - folder in a *.js file.
What I am using:
Blazor Server App empty (VS2022, C#).
I only need/use Server App in VS2022 C# and empty - without any predefined navbars and other elements. So there are no any *.cshtml files except one which is automatically created while creating a "Blazor Server App Empty" in VS 2022 and that is "_Host.cshtml"
And I don't want to use any other template in VS 2022, only this one mentioned.
So, after creating a "page" using this in VS integrated template, I added following in MainLayout.razor (I am using *razor and only razor - no any cshtml):
// this was originally created as in the template in VS2022
#inherits LayoutComponentBase
//this one also:
<main> #Body </main>
// That is what I added here in MainLayout.razor, it's from this site: [http://jsfiddle.net/Ag47D/3/](https://www.stackoverflow.com/)
<div class="navbar">
<div class="navbar-fixed-top">
<div class="container" style="width: auto;">
<div class="nav-collapse" id="nav-collapse">
<ul class="nav" id="nav">
<li id="home">Home</li>
<li id="skill">Skill</li>
<li id="research">Research</li>
<li id="link">Link</li>
</ul>
</div>
</div>
</div>
</div>
And then I added the css part to the existing "site.css" in that simply VS 2022 project:
`.navbar #nav > .active > a {
color: red;
}`
And finally - and that is the big issue for me to understand WHRE/HOW to handle that . a simply JavaScript part (you can find that on the same site mentioned):
` $(function() {
$('#nav li a').click(function() {
$('#nav li').removeClass();
$($(this).attr('href')).addClass('active');
});
});`
I added that to a created folder in wwwroot, the flder is called: "js" and the file inside that folder is called: "setactivetab.js". In that file is the mentioned part of javascript.
In "_Host.cshtml" I added then that, here the part of that _Host.cshtml where you can see what I added:
`....
....
Reload
<a class="dismiss">🗙</a>
</div>
<script src="~js/setactivetab.js"></script>
<script src="_framework/blazor.server.js"></script>
</body>
</html>`
So I tried with:
<script src="~js/setactivetab.js"></script>
and:
<script src="js/setactivetab.js"></script>
and:
<script src="~/js/setactivetab.js"></script>
But nothing worked. I mean: TABS are shown on the page - no question about that - but if I click on one of that TABs - nothing happens, the color isn't changed.
Somehow I am not able to understand how to use a self created/from google downloaded, JavaScript for simply changing of the color or to set a selected TAB as active/current or however we can use that.
I tried so many examples described on the web. I can't get that working - maybe I am missing/not understood some fundamental knowledge of using a JavaScript. I simply don't know the way how one can use that.
Can you please post me here a working example of a navigation TABS, ideally self created and simply? Important is: WHERE to put a javascript and how to access that properly so the clicking on a TAB wil lchange his color and stay so until I click on another TAB in a simply - if possible: horizontal, not vertical, navigation bar.
I have enough from searching/reading of many web sites descriptions as there works all and if I copy&paste some simply example, it doesn't work.
I'm having trouble getting transitions to work for my child routes.
I have the following pages:
pages/
child/
_id.vue
child.vue
index.vue
Navigating between index and any of the child routes triggers transitions, but when navigating from one child route to another child route there is no transition.
Note that there is a static route /child and dynamic routes for /child/_id. The <nuxt-child /> component is inside child.vue:
<template>
<div class="container">
<h1 class="title">
Child Root Page
</h1>
<nuxt-child />
</div>
</template>
<script>
export default {
key(route) {
return route.fullPath
},
}
</script>
If I remove the static route child.vue and move <nuxt-child /> to index.vue all transitions work, but then I don't have the 'parent' child page anymore.
Is it possible to get the transitions to work in this case?
I have a small repo showing the problem and a github page with the site deployed.
I have multiple templates in my project, with a fairly simple url structure.
/startpage/
/startpage/test_1
/startpage/test_2
In my 'App.vue' I made a template, which is shown on every page in my project. That template includes a button, which is supposed to act like a 'Home' button, named 'Projects'.
App.vue
<template>
<div>
<div>
<router-link :to="/startpage/"><button class="Project">Projects</button></router-link>
</div>
<router-view/>
</div>
</template>
When I'm on the startpage (localhost:4545/#/startpage/), the button has the target localhost:4545/#/startpage/.
But when I'm on another page, for example localhost:4545/#/startpage/test_1, the button suddenly has the same url as the page I'm on.
Why does the router change the link dynamically and not keep the target /startpage/?
As described in the documentation, you either need to use binding or not:
<!-- literal string -->
<router-link to="home">Home</router-link>
<!-- renders to -->
Home
<!-- javascript expression using `v-bind` -->
<router-link v-bind:to="'home'">Home</router-link>
<!-- Omitting `v-bind` is fine, just as binding any other prop -->
<router-link :to="'home'">Home</router-link>
So it should be that you don't need to use :, or use a string literal. Currently it tries to use it as a variable, which of course it not present.
The structure of my vue app is this:
root.vue:
<template>
<header-yo> <h1> visible? or not? </h1> </header-yo> //content btw tags is invisible
<footer> </footer>
</template>
<script>
import Footer from "./components/footer";
import Header from "./components/header";
export default {
components: {
"footer": Footer,
"header-yo": Header // header-yo is "custom tag" now!
}
};
</script>
<style> ...</style>
header:
<template>
<h1>rrrrr</h1> //this is visible
</template>
<script> </script>
<style scoped> </style>
When we create this custom tag "" - it only serves as declarator of a component?
Nothing can be added in btw custom tags?
Because I can only see on the webpage what's inside my actual header.vue file, not inside my own custom tags. Is this the vue-idiomatic style?
the root.vue that has all other components is only there to put things together, and nothing can go in btw custom tags - they only show what components\other vue files are there? If I want to add something in header- it should go in corresponding separate header.vue file?
The js fiddle is here
What your trying to do is comparable to AngularJS transclusion mechanism. You need to actually tell vuejs where the content will be inserted in the template by using a <slot></slot> element:
<template>
<h1>rrrrr</h1> // this is visible
<slot></slot> // this is where "<h1> visible? or not? </h1>" would be inserted
</template>
You can find more about this in vuejs component guide or the dedicated Slot documentation page.
So, I run my church's website and I try to stay pretty basic in the coding, but we have seasonal pages that we add and remove from the website all the time so I get tired of changing the "simple" HTML code on every page for the nav bar. I have found where I can use PHP and have one code, like but is it possible to have the current page highlighted, i.e. on our website now, the current page name is bold and a different color.
I have also seen JS do this (Highlighting current page in the nav) but I don't really understand how to implement this, so if you think this could be the better route for me, and can help explain how to do it, that would be cool.
Any help would be great!
add an id attribute to the body tag of each of your pages, like this:
<body id="home"> <!-- this would be for your home page for example -->
...
<body id="about"> <!-- this would be for your about page... -->
add the same to the li tags of your nav, like this:
<li id="home">Home</li>
<li id="about">About</li>
then in the CSS file just do this:
body#home li#home, body#about li#about { // style of the active menu item }