I'm using Nuxt2. I want to have a routing which have dynamic param for each route and this param can be dynamic. For example:
/users/london
/posts/london
/products/berlin
/products/apple-watch/berlin
/products/samsung-flip/berlin
/products/samsung-flip/london
/products/samsung-flip/tokio
Is there any possible solutions for this?
I tried to extend my routes in nuxt.config.js with following
extendRoutes(routes, resolve) {
routes = routes.map((route) => ({
...route,
path: route.path + '/:region',
}))
},
But I ended up with error 404 page.
Are you sure the extendRoutes is in the router object?
The following is an example for users, make sure to push to routes and not overwrite it.
router: {
extendRoutes(routes, resolve) {
routes.push({
name: 'users',
path: '/users/:region',
component: resolve(__dirname, 'src/pages/PATH_TO_COMPONENT/_id.vue'),
});
routes.push({
name: 'products',
path: '/products/:region',
component: resolve(__dirname, 'src/pages/PATH_TO_COMPONENT/_id.vue'),
});
routes.push({
name: 'samsung-flip',
path: '/products/samsung-flip/:region',
component: resolve(__dirname, 'src/pages/PATH_TO_COMPONENT/_id.vue'),
});
},
},
Related
I'm working on a Vue.js webapp. Recently I realized then when I want to change route (going home) from a Vuex action, it takes a lot of time and never end. It take 4600 MB RAM and 70% CPU.
Here is the indicted code:
impostaSelezionabili: ({ commit,dispatch }, payload) => {
commit("associazioniSelezionabiliImpostate", payload)
const prefe = payload.prefe
if (payload.associazioni.length == 1) {
commit("associazioneScelta", payload.associazioni[0].codAssociazione)
dispatch("toolbarManager/setToolbarVisibility", true, {root: true})
router.push({ path: '/' })
}
},
Everything works perfectly without router line, when I add router.push({ path: '/' }) it gets the problem.
Is there a way to solve?
Router config / Routes:
export const router = new Router({
mode: 'history',
routes: [
{ path: '/', component: HomePage, name: "Home", meta: "Home" },
{ path: '/servizi', component: ServiziPage, meta: "Servizi" },
{ path: '/servizi/:id', component: ServizioPage, meta: "Servizi" },
{ path: '/login', component: LoginForm},
{ path: '/corsi', component: Corsi, meta: "Corsi" },
{ path: '/corsidisponibili', component: Corsi, meta: "Corsi disponibili" },
// otherwise redirect to home
{ path: '*', redirect: '/', meta: "Home" }
]
});
Make sure that your router exists and that is not an import of vue-router. You need to use the router that you constructed with the new Router().
But I think that is the best way to solve it - that navigating inside a component after a Promise returned by that action will be resolved because in the current case your action isn`t pure.
Update: I can see the url changing in the address bar but the page contents doesnt change.
I have just started learning vue js recently and I am currently facing an issue with deep nested routes. Whenever I try to access the deep nested route I encounter a 404. The route that gives me 404 is on "/classes/new".
Router.js
import { createRouter, createWebHistory } from "vue-router";
import AdminLayout from "./layouts/AdminLayout";
import NotFound from "./pages/NotFound";
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: "/",
redirect: "dashboard",
component: AdminLayout ,
children: [
{
path: "/dashboard",
name: "dashboard",
component: () => import("./pages/Dashboard")
},
{
path: "/courses",
name: "courses",
component: () => import("./pages/Courses")
},
{
path: "/classes",
name: "classes",
component: () => import("./pages/Classes/Classes"),
children: [
{
path: "/new",
name: "new",
component: () => import("./pages/Classes/AddClass"),
}
]
},
{
path: "/categories",
name: "categories",
component: () => import("./pages/Categories")
}
]
},
{ path: "/:NotFound(.*)", component: NotFound }
]
});
export default router;
I think your children path should not start with a slash.
try path: "new" instead of path: "/new" ?
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 have my routes as define below:
const router = new Router({
base: '/',
mode: 'history',
routes: [
{
path: '/',
redirect: `${DEFAULT_LOCALE}`,
},
{
path: '/:locale?',
component: AppTemplate,
children: [
{
path: 'home',
name: 'home',
component: () => import('#/views/Home.vue'),
meta: {
title: 'Home',
}
}
{
path: 'about',
name: 'about',
component: () => import('#/views/About.vue'),
meta: {
title: 'About',
},
},
{
path: 'contact',
name: 'contact',
component: () => import('#/views/Contact.vue'),
meta: {
title: 'Contact',
},
},
{
path: '*',
redirect: { path: '/' },
},
],
},
{
path: '*',
redirect: { path: '/' },
},
],
});
export default router;
I use :locale for app translation. It is optional because empty locale is for default language. My problem here is even if locale is present, all the links to other pages are without the locale, if that makes sense. For eg, example.com/about is in Italian and example.com/en/about is in English. But which ever URL it is, the links present on the page always points to contact or home page as example.com/contact and example.com/home. Is there a way to fix this? Or is there an easier way to use app translation from URL. I am using vue-i18n for the translation. Thanks
For such configuration I think you have to pass param to make it work:
<router-link :to="{name: 'contact', params: {locale: $route.params.locale} }">
https://jsfiddle.net/3gx4hak5/
Also maybe router-link append attribute will do the trick for you: https://router.vuejs.org/api/#append
Setting append prop always appends the relative path to the current path. For example, assuming we are navigating from /a to a relative link b, without append we will end up at /b, but with append we will end up at /a/b.
<router-link :to="{ path: 'relative/path'}" append></router-link>