I am wondering how to display the content of a child page without showing the parent.
I figured this would be straightforward, but I've found nothing about how to do this. My current output has page 'app/parent' rendering some content for the parent, and 'app/parent/child-A' displays that same content from the parent with the child's content at the bottom. I'd like to only display the child's content while maintaining the 'app/parent/child-A' URL.
I suspect that I may be approaching the parent/child functionality in nuxt wrong and there is some better option for what I'm trying to do.
you can use v-if
router.js
....
const page = path => () => import(`./pages/${path}.vue`).then(m => m.default || m);
const routers = [
{
path: '/posts',
component: page('posts/layout'),
props: true,
children: [
{
path: '',
name: 'posts/index',
component: page('posts/index'),
props: true
},
{
path: ':id',
name: 'posts/show',
component: page('posts/show'),
props: true
}
]
},
...
];
...
pages/posts/layout.vue
<template>
<main>
<h1 v-if="$router.name !== 'posts/index'">from parent layout</h1>
<nuxt/>
</main>
</template>
Related
I have a button in a component that onclick will navigate to its child component.
Button code
<button class="summary" #click="navigateToSummary">
<span>Summary</span>
</button>
methods:{
navigateToSummary() {
return this.$router.push({
name: 'PortfolioSummary',
params: { coinId: this.coinSummary.coinId },
});
},
}
Router code
{
name: 'AppPortfolio',
path: '/portfolio',
component: AppPortfolio,
children: [
{
name: 'PortfolioSummary',
path: ':coinId',
component: PortfolioSummary,
props: true,
},
],
},
On clicking the button, the url updates in the browser, but it doesnt navigate to the child component.
What am I meant to change?
Your AppPortfolio view requires it's own <router-view> where PortfolioSummary will be rendered.
Basically when you use nested child routes in this manner they require a router-view inside a router-view to settle your 2 tree deep setup, a 3 for deep tree example will requires 3 nested router-views, so on and so fourth.
App.vue
<router-view>
AppPortfolio
<router-view>
PortfolioSummary
So Iv'e tried to nest my routes unsuccessfully using Vue router.
{
path: '/admin',
name: 'Admin', component: () => import('pages/Admin'),
children:[
{ path: 'stock', name: 'Stock', component: ()=> import('pages/Stock')},
]},
It did not work so I found out that I need to put inside the parent component.
Now it works but if I load the page /admin/stock it renders the two componets. one on top of the others.
Why the parent component (/admin page) is still displayed?
Btw when I did the same thing without nesting the routes it worked perfectly fine and the components rendered seperatly(the snippet below).
{
path: '/admin',
name: 'Admin', component: () => import('pages/Admin'),
children:[
//no nested route
]},
{ path: 'admin/stock', name: 'Stock', component: ()=> import('../pages/Stock')},
Thanks for the help
You should include in "Admin" component a router-view tag. Admin component will work as a "layout" and it will render the children corresponding to the current route.
In example
Admin Component:
<template>
<div>
<div>
Content present in all childrens
</div>
<router-view>
<div>"Admin" page content</div>
</router-view>
</div>
</template>
Stock component:
<template>
<div>
"Stock" content
</div>
</template>
When you go to /admin
It will render:
<div>
<div>
Content present in all childrens
</div>
<div>"Admin" page content</div>
</div>
When you visit /admin/stock
It will render:
<div>
<div>
Content present in all childrens
</div>
<div>"Stock" content</div>
</div>
Here you have a better example
https://router.vuejs.org/guide/essentials/nested-routes.html
If you don't need reuse "Admin" component layout, you could use routes as you mentioned in the second case, without nesting them
Ive been stuck on the best way to manage a header navigation in Vue 2, vuex with VueRouter.
I have a main 'header' type navigation in my App.vue
<div id="nav">
<!--Try and create a dynamic nav-->
<span v-for="route in routes" :key="route.to">
<router-link :to="`${route.to}`">{{route.text}}</router-link> |
</span>
</div>
<b-container>
<router-view />
</b-container>
</div>
I was hoping as, the user navigates around the page and into other views and components within views. That i could update the 'routes' array to push the current location they are in. Obviously this is very Non Vue since it would require a global variable of some sort. I was curious if the best way to go about updating a header nav when you are working with nested routes.
Example of routes:
{
path: '/Teams',
name: 'Teams',
component: Teams
},
{
path: '/:teamName/Athletes',
name: 'Athletes',
component: Athletes
},
{
path: '/:teamName/Athletes/:id',
name: 'Athlete',
component: Athlete
}
What i would like is for when you are on the Athlete page, you could have a route back to athletes ON the App.vue header nav, that is dynamic with the selected :teamName. That could be removed and added as necessary.
Example of user story: /Teams-> Selects team 'Team1' -> Sends them to /Team1/Atheltes -> clicks an athlete -> sends them to /Team1/Athlete/1. In the header nav (Which is cucrently in App.vue) how can i add a router-link to include the appropriate ':teamName' to be able to go back to /Team1/Athletes?
It seems to use Vuex will simplify your work:
Put your routes on a state:
// ...
state: {
routes: [{
path: '/Teams',
name: 'Teams',
}]
}
/Teams-> Just remove others routes that can be added.
// ...
mutations: {
deafultRoute(state, payload) {
state.routes = state.routes.slice(0, 1); // Be sure to have only 1 route
}
}
/Team1/Atheltes -> Add the team route for team:
// ...
mutations: {
addTeamRoute (state, payload) {
state.routes = state.routes.slice(0, 2); // Be sure to have only 2 routes
let newPAth = {
path: `/${payloadteamName}/Athletes`,
name: 'Athletes'
}
state.routes[1] = newPAth
}
}
/Team1/Athlete/1. -> Add the team route for team:
// ...
mutations: {
addAthleteRoute (state, payload) {
state.routes = state.routes.slice(0, 3);
let newPAth = {
path: `/${payload.teamName}/Athletes/${payload.id}`,
name: 'Athlete'
}
state.routes[2] = newPAth
}
}
I think you don´t need to save Component on routes array.
I do something like this:
{
path: '/Teams',
name: 'Teams',
component: Teams,
meta: {
module:'Teams'
}
}
You can then use the meta property to direct your "back" (among other things)
I'm using VueJS's own router component. In my admin interface, there is one page which shows an overview list and another one with specific options for one single entry.
function configRoutes() {
return [
{
path: '/',
redirect: '/default',
name: 'Home',
component: TheContainer,
children: [
{
path: 'admin/viewerRoles',
name: 'List',
component: AdminViewerRoles,
children: [
{
path: ':id-:name',
name: 'Settings',
component: AdminViewerRoleSettings
}
]
}
]
}
]
}
With that approach, I can place a <router-view /> tag in my AdminViewerRoles component. This will render the details page as viewport. What I wonder is, if it is possible to render either of the views without giving up the syntactically correct, nested navigation approach.
My idea would be to place the <router-view /> tag and the normal page content in two different div elements and render them conditionally with v-if. But is that really the best approach?
This would be my idea (untested):
<template>
<div v-if="$route.params.id">
<router-view />
</div>
<div v-else>
<table>...</table>
</div>
</template>
Im using Vue Router. In my code I used to have:
<div v-bind:is="page.component_name" v-bind:page="page"></div>
Which worked, and the page data was passed to the component. But how do I do the same with a router-view? This doesn't seem to work:
<router-view v-bind:page="page"></router-view>
js:
var vm = new Vue({
...,
router : new VueRouter({
routes : [
{ path: '/foo', component: { template: '<div>foo</div>', created:function(){alert(1);} } },
//{ path: '/bar', component: { template: '<div>bar</div>', created:function(){alert(2);} } },
{ path: '/bar', component: Vue.component("ti-page-report") }
]
}),
...
});
vue-router has a dedicated page in docs on how to pass props to router-view.
Passing Props to Route Components
Example snippet from docs:
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User, props: true },
// for routes with named views, you have to define the `props` option for each named view:
{
path: '/user/:id',
components: { default: User, sidebar: Sidebar },
props: { default: true, sidebar: false }
}
]
})
If you are looking for simplified usage, props can still be passed the same way they are passed to any component. But component that is used for rendering the route (the one that is specified in route definition) should expect to receive the props.
Here is simple usage example of passing props to router-view:
I personally decided to use provide/inject feature: preserving reactivity with minimal overhead.
The component ("ti-page-report") that needs to access the props being sent just needs to add it:
<template>
<div>
<h1>Now you can access page: {{ page }}</h1>
</div>
</template>
export default {
name: "TiPageReport",
props: ['page'], // can now be accessed with this.page
...
};
See https://v2.vuejs.org/v2/guide/components-props.html for how to use props properly.