I'm trying to set up a routing system with vue. For my purpose, I need a fixed navbar on the top that needs to be displayed on every page and a sidebar that I want to display only on the settings page. Following the documentation I tried:
const routes = [
{
path: '/settings',
name: 'Settings',
component: Settings,
children: [
{
path: 'route1',
name: 'Route1',
component: Route1
},
{
path: 'route2',
name: 'Route2',
component: Route2
}
]
}
]
Then on the settings template:
<template>
<div class="flex items-start">
<div class="lg:w-3/12 w-12 sm:w-16 md:w-24 pb-10 lg:pr-8">
<Sidebar />
</div>
</div>
<div class="lg:w-9/12 w-full pt-10 pb-8 text-justify">
// My subroute goes here
</div>
</template>
I feel that I'm missing something. First, I can't understand how to properly display the subroutes. I tried with <router-view /> but it seems to refer to the parent navigation.
Second, I don't want the user to visit the /settings route but only /settings/route1 and settings/route2.
I can achieve this by simply adding the sidebar in every settings route but this seems bad because it forces the <Sidebar/> component to be mounted every time
Where am I wrong?
Thanks
As you probably have guessed, the <router-view /> element goes in your Settings component:
<template>
<div class="flex items-start">
<div class="lg:w-3/12 w-12 sm:w-16 md:w-24 pb-10 lg:pr-8">
<Sidebar />
</div>
</div>
<div class="lg:w-9/12 w-full pt-10 pb-8 text-justify">
<router-view /> <!-- Here is your router view -->
</div>
</template>
Then as it was pointed out in the comments, /settings will always be a valid route.
What you can do when the client directly navigates to /settings is to replace the current route with one of the two children (possibly based on some logic) in the mounted hook:
mounted() {
if(this.$router.currentRoute.path.endsWith('/settings')) {
this.$router.replace('/settings/route1')
}
}
Or use $router.push() instead based on what you want the navigation history to look like.
Related
I have 2 components, AboutView.vue and HomeView.vue.
AboutView.vue
<template>
<div class="about">
<h1>This is an about page</h1>
<router-link to="/about/add">Add</router-link>
<router-view></router-view>
</div>
</template>
HomeView.vue
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
When I click the 'Add' button, I will be redirected to /about/add where /add is config inside index.js
{
path: '/about',
name: 'about',
component: AboutView,
children:[
{
path: 'add',
name: 'Add',
component: ()=> import ('../views/HomeView.vue'),
},
]
}
The path is working fine.
But the problem is when I click the 'Add' button, what I would expect is it brought me to the HomeView.vue, but instead, it showed the HomeView.vue below the Add button.
Here is the screen.
ScreenShot
it seems like the route-view is a part of the template, but I want it to display the HomeView.vue instead of AboutView + HomeView.
I tried to use <router-view name='name></router-view>, which doesn't help much. I can write a js function to check the path and make the code above disappear, but I expect something more professional.
Let's try to understand from the below image-
router-view is basically the view where the components are rendered.
It’s like the main div that contains all the components, and it
returns the component that matches the current route.
So, to fix this just remove the router-view from AboutView.vue component, so when you will redirect to /home, the component HomeView.vue, will render inside App.vue's router-view.
Vue newbie here. With the out-of-box default app created by Vue-CLI, including Vue Router, you have the top navbar with the Home and About links. What I want is: when you click on the About link, instead of updating the content below the navbar, it will update the entire page i.e. making the navbar disappear.
In App.vue:
<template>
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view />
</template>
The router is set-up in router/index.js as:
import { createRouter, createWebHashHistory } from "vue-router";
import Home from "../views/Home.vue";
const routes = [
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/about",
name: "About",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "about" */ "../views/About.vue"),
},
];
const router = createRouter({
history: createWebHashHistory(),
routes,
});
export default router;
This is to simulate a typical login page where you often don't get navbar.
I played with nested routers but no luck. I'm using Vue 3.
I solved this by extracting the nav links into its own component, and only display the nav links on the pages that need it. This means in the sign-up page I do not include the nav links.
So after creating the default Vue-CLI starting app, I removed the nav components:
<template>
<!-- <div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/signin">Sign In</router-link>
</div> -->
<router-view />
</template>
And created a new Nav.vue component:
<template>
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/signin">Sign In</router-link>
</div>
</template>
Added the Nav component to the pages where I want the nav to show, e.g. Home.vue:
<template>
<Nav />
<div class="home">
<img alt="Vue logo" src="../assets/logo.png" />
<HelloWorld msg="Welcome to Your Vue.js App" />
</div>
</template>
I do not include the nav in my sign-in:
<template>This is the SIGN IN page - note there is no navigation links.</template>
Being a Vue noob, not sure if the above is the best approach, but it is working for now.
So I have a basic layout :
<template>
<q-layout view="lHh Lpr lFf">
<q-header elevated class="bg-secondary text-white">
<q-toolbar >
<slot name="toolbar"></slot>
</q-toolbar>
</q-header>
<q-page-container >
<router-view ></router-view>
</q-page-container>
</q-layout>
</template>
And a basic router:
const routes = [
{
path: '/',
component: () => import('layouts/MyLayout.vue'),
children: [
{ path: '', component: () => import('pages/Index.vue') }
]
}
]
and Index.vue:
<template>
<q-page>
<template v-slot:default> CONTENT SHOWS</template>
<template v-slot:toolbar> CONTENT DOESN'T SHOW</template>
</q-page>
</template>
What do I do wrong? How can I get the slot up the router?
Simple answer: there is no way to accomplish that using slots.
You are seeing CONTENT SHOW because q-page has the default slot, but there is no definition for the toolbar slot there. Remember, slots get passed to their direct parents, this is a Vue fundamental rule. Your practice moved me to the age of master pages.
Using Name Views is the proper solution -- should move your toolbars into separate components and define them in routes.
Another solution, check the current route and render a proper toolbar:
<template>
<q-layout view="lHh Lpr lFf">
<q-header elevated class="bg-secondary text-white">
<q-toolbar>
<template v-if="$route.name === 'Index'">
<div>Toolbar for Index Page </div>
</template>
<template v-else-if="$route.fullPath.startsWith('/nested')">
<div>Toolbar for Index2 Page </div>
</template>
<template v-else>
<div>Toolbar for Default Pages </div>
</template>
</q-toolbar>
</q-header>
<q-page-container>
<router-view></router-view>
</q-page-container>
</q-layout>
</template>
Of course, moving these v-if logics into a separate component is a better practice.
It's been a long time since the original post, but maybe it can help someone else. Use names in router-view.
<template>
<q-layout view="lHh Lpr lFf">
<q-header elevated class="bg-secondary text-white">
<q-toolbar >
<router-view name="toolbar"></router-view>
</q-toolbar>
</q-header>
<q-page-container >
<router-view></router-view>
</q-page-container>
</q-layout>
</template>
Then, the route setup can contains something like this
const routes = [
{
path: '/',
component: () => import('layouts/MyLayout.vue'),
children: [{
path: '',
components : {
default: () => import('pages/Index.vue'),
toolbar: () => import('some another page or component.vue')
}
}]
}
]
I wounder how I best set up the router in Vue.js for handling ”subpages”. For example I got a navbar that routes to different pages. From one of these pages I want to have links to subpages. How do I best set this up?
I have done like this so far:
App.js
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view />
</div>
</template>
Then I set up my router:
export default new Router({
routes: [
{
path: "/",
name: "home",
component: Home
},
{
path: "/about",
name: "about",
component: About,
children: [
{
path: "/child1",
name: "child1",
component: Child1
}
]
}
]
})
And my About.vue where I provide the link to Child1
<template>
<div class="about">
<h1>This is an about page</h1>
<router-link to="/child1">Child1</router-link>
<router-view></router-view>
</div>
</template>
And finally my Child1.vue
<template>
<div class="child1">
<p>My message</p>
</div>
</template>
My problem is that the link to Child1 is displayed both on the About page and on Child1 page. I just want to display it on the about page and only the content from the Child1 on the Child1 page
How is the best practice of setting up things like this?
Thanks
My problem is that the link to Child1 is displayed both on the About page and on Child1 page. I just want to display it on the about page
Just to clarify what's happening here: the link to Child1 is always visible within the About component even if child routes are active, but you don't want to show the link when the child route is active.
Way 1
You can provide fallback content to <router-view> when there is no matching route (i.e. when no child route is active). This would be a good opportunity to show the link.
<template>
<div class="about">
<h1>This is an about page</h1>
<router-view>
<router-link to="/child1">Child1</router-link>
</router-view>
</div>
</template>
Way 2
The above solution may not work if your template is more complicated and if you want to situate the link elsewhere in the template.
So you'll have to manually control the visibility of the link by using v-if so that it is only visible when the child route is not active.
<template>
<div class="about">
<h1>This is an about page</h1>
<!-- Show only when no child routes are active -->
<router-link v-if="$route.name === 'about'" to="/child1">Child1</router-link>
<!-- Or, do not show when Child1 route is active -->
<router-link v-if="$route.name !== 'child1'" to="/child1">Child1</router-link>
<router-view></router-view>
</div>
</template>
A very simple example for using a vue-router in template is the following code:
<template>
<div id="app">
<router-view/>
</div>
</template>
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
what I understand is that the content of router-view will be switched by the relevant component to the path.
However, if I have a template with more than one element affected by router. For example,
<template>
<div id="app">
<h1> header </h1>
<router-view 1/>
<h1> Inner </h1>
<router-view 2/>
<h1> Footer </h1>
</div>
</template>
and let's say that router-view 1 and router-view 2 both can get different components based on the path.
In this case, how would you recommend me to use router?
Based on official doc, you have to use named-views.
Like that, you can have multiple router-view rendering differents components for the same path.
With your example, it becomes :
<template>
<div id="app">
<h1> header </h1>
<router-view /> // this will be the default
<h1> Inner </h1>
<router-view name="inner"/>
<h1> Footer </h1>
</div>
</template>
and your router will look like :
// Don't forget your imports
const router = new VueRouter({
routes: [
{
path: '/',
components: {
default: HeaderComponent, // Will render in default router-view
inner: InnerComponent // Will render in router-view named "inner"
}
}
]
})
More complex layouts are also describes in the official doc.