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'});
Related
I am trying something like this
{
path: "/portfolio",
component: () =>
import("../common/components/Layout/Layout/Profile/ProfileLayout"),
meta: { requiresAuth: false },
children: [
{
path: "/:username",
component: () =>
import(/*webpackChunkName: "profile"*/ "../modules/Profile/Profile"),
},
],
},
But the piece of code is not working while routes without child routes working perfectly
{
path: "/profile/:userName",
component: () => import("../modules/profile/UserProfile"),
}
how can i solve the first piece of code ?
You should remove the prepended slash from the child route path :
path: ":username",
or try out :
path: "user/:username",
then you could visit the url like /portfolio/user/john
I feel like I'm missing something very obvious but I can't figure it out. Please help!
I have the following routes defined:
const routes = [
{
path: '/',
name: 'Login',
component: () => import('../views/Login.vue'),
meta: {
authRedirect: true
}
},
{
path: '/companies',
name: 'Companies',
component: () => import('../views/Companies.vue'),
meta: {
requiresAuth: true
}
},
{
path: '/companies/:id',
name: 'Company',
component: () => import('../views/Company.vue'),
meta: {
requiresAuth: true
}
},
{
path: '*',
name: '404',
component: () => import('../views/404.vue')
}
]
Then I have the following in my component:
export default {
name: 'Company',
data() {
return {
company: {}
}
},
methods: {
getCompanyDetails: function() {
let self = this
axios.get('/api/companies/' + this.$route.params.id).then(function(response) {
self.company = response.data
}).catch(function() {
self.$router.push('companies')
})
}
},
created() {
this.getCompanyDetails()
}
}
Essentially everything is working if the API returns data, but inside the catch function I'm trying to push the route back to /companies. But it's redirecting to /companies/companies. How do I redirect it to the correct route?
Did you tried $router.push('/companies') (with a / in the path) ?
Also, you can use $router.push({ name: 'Companies' }) if you want to make it more clear, it will match the name defined in your routes.
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.
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()
})
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
]
},