I need to access the route params from inside the route children meta, so I can do a fetch and get another value. In this example, I want to get the id from params, so I can run a function and get the user name with this id and use it in the meta field. Is this possible?
path: '/user/:id',
component: User,
props: true,
beforeEnter: requireAuth,
children: [
{
path: '',
name: 'user',
component: UserOverview,
meta: {
breadcrumb: [
{name: 'Users', params: {name: 'users'}},
{name: getUserName(id)}
]
}
}, {...
beforeEach hook might help.
router.beforeEach((to, from, next) => {
if (!to.meta.breadcrumb) {
to.meta.breadcrumb = 'your_content'
}
next()
})
Related
How to use a guard to move to next rule of route instead of redirect to specific route?
for example, I have some routes:
routes: [
{ path: '/', component: Main },
{ path: '/about', component: About },
{ path: '/:product', component: Product },
{ path: '*', component: NotFoundException }
]
and in Product component I have beforeRouteEnter function like that:
beforeRouteEnter(to, from, next) {
const question = checkIfExist(to.params.product);
if (question) { next(); return;}
next();
}
if the product not exist then it should be redirect to NotFoundException component. in the stackoverflow example I see only example with redirect to specific url (like login) which is not helpful.
When I given url: '/some' then vue check if:
is / ? no => next route.
is /about ? no => next route.
is /:product ? no => next route.
display NotFoundException component.
You can reference the next route by route name.
First, name your exception route
routes: [
{ path: '/', component: Main },
{ path: '/about', component: About },
{ path: '/:product', component: Product },
{ path: '*', name: 'notFound', component: NotFoundException }
]
Then, create a variable which stores your beforeEnter Logic
const productExists = (to, from, next) => {
const question = checkIfExist(to.params.product);
if (question) { next(); return;}
next({
name: "notFound"
});
}
Add the route guard to the routes that you want to guard
routes: [
{ path: '/', component: Main },
{ path: '/about', component: About },
{ path: '/:product', component: Product, beforeEnter: productExists },
{ path: '*', name: 'notFound', component: NotFoundException }
]
I need few dynamic route in Vue router like
/payouts/:person
/payouts/:pay_id
I tried make some children routes but its not working, its work like this only with id but it not what i want
{
path: 'payouts',
name: 'Payouts',
meta: {
title: 'Payouts'
},
component: () => import('#/pages/Payouts'),
},
{
path: 'payouts/:pay_id',
name: 'Pay_id',
meta: {
title: 'Pay'
},
component: () => import('#/pages/Pay_id'),
},
For parameterised routes use
this.$router.push({name: 'payouts', params: { pay_id: "SomeID"}});
Or
this.$router.push({path: '/newLocation/SomeID'});
for non parameterised route
this.$router.push({path: '/newLocation'});
I want to pass the last route into my router when I'm in /login to redirect the user when is logged to desired route.
So the user go to /payment I redirect to /login and when the authentication is ok I want to redirect the user to payement
Here is my router.js :
import ...
Vue.use(Router)
let router = new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/login',
name: 'login',
component: Login
},
{
path: '/about',
name: 'about',
component: About
},
{
path: '/payment',
name: 'payment',
component: Payment,
meta: {
requiresAuth: true
}
},
{
path: '/my-account',
name: 'my-account',
component: MyAccount,
meta: {
requiresAuth: true
}
}
]
})
router.beforeEach((to, from, next) => {
console.log('Before Each Routes')
if(to.matched.some(record => record.meta.requiresAuth)) {
if (store.getters.isLoggedIn) {
console.log('Logged in')
next()
return
}
console.log(to.fullPath)
next({
path: '/login',
params: { nextUrl: to.fullPath }
})
return
} else {
console.log(to.fullPath)
next()
}
})
export default router
So I set some console.log and I got this :
if I go directly to /login, Output :
Before Each Routes
/login
Then if I go to /payment, Output :
Before Each Routes
/payment
Before Each Routes
/login
So now when I go in my login component and I use this.$route.params.nextUrl it's undefined. The next() parameter doesn't exist and I don't know why.
What I'm doing wrong ?
It looks like you're confusing two different mechanisms: params and query. Params have to be integral to the url, like /user/:id while query params are appended automatically.
You want this:
next({
path: '/login',
query: {
nextUrl: to.fullPath,
}
})
Related reading: https://router.vuejs.org/api/#route-object-properties
Tristan's approach above is the best when passing a url as a parameter. However, in normal cases we're passing something like an id so you can use this:
next({ name: 'account', params: { id: 3 } });
Add the replace option to prevent the navigation from appearing in the history:
next({ name: 'account', params: { id: 3 }, replace: true });
I'm using vue-router 3.1.6.
On my site I have a navigations with some categories and nested navigation anchors in them. How can I group this routes in vue-router? The best I've come up with is to place for each route a meta and then group by it.
I use like this (look that component: { render: h => h('router-view') }):
{
// =============================================================================
// MAIN LAYOUT ROUTES
// =============================================================================
path: '',
component: () => import('./layouts/main/Main.vue'),
children: [
// =============================================================================
// Routes
// =============================================================================
{
path: '/',
name: 'home',
component: () => import('./views/Dashboard.vue'),
},
// =============================================================================
// User Routes
// =============================================================================
{
path: '/user',
name: 'user',
component: { render: h => h('router-view') },
children: [
{
path: 'list',
name: 'user.list',
component: () => import('./views/pages/User/List.vue'),
},
]
},
],
}
There is forked and fixed example: https://jsfiddle.net/andrewright/wsmx92bg/
You should know, that children routers opens inside parent template. That means you need to add additional <router-view> inside parent template.
The idea is that: children routers change some block, like part of parent content. Good way to use it - for subcategory menu.
You can use nested routes. In your routes file you can do something similar.
{
path: '/category',
name: 'category',
component: Category,
children: [
{
path: 'subcategory',
name: 'subCategory',
component: ChildComponent,
},
// other nested routes
]
},
I have a route and sub route like these.
export default new Router({
routes: [
{
path: '/user',
component: UserView,
meta: {title: 'User Manager'},
children: [
{path: 'editor', component: EditorView, meta: {title: 'User Editor'}}
]
}
]
})
In UserView and EditorView both have mounted function.
export defaults {
mounted () {
console.log(this.$route)
}
}
And i type http://host:port/#/user/editor in browser, the console print twice $route data and they is same object. How could i get UserView route data?
{name: undefined, meta: {…}, path: "/user/editor", hash: "", query: {…}, …}
{name: undefined, meta: {…}, path: "/user/editor", hash: "", query: {…}, …}
UserView and EditorView is in the same page and they html look like this picture.
There are multiple route parts that are matched for a given URL when nested routes are involved. You'll need to search this.$route.matched for the specific route that you are interested in.
If you set a name for the route you're interested in, it'll make it easier to find:
{
path: 'editor',
name: 'editor', // <-- Add this
component: EditorView,
meta: {
title: 'User Editor'
}
}
mounted() {
const route = this.$route.matched.find(r => r.name === 'editor');
console.log(route.meta.title);
}