I'm trying to put a router that is imported as a constant in main router`s children
router/components/slider/index.js:
const sliderRouter = {
path: '/slider',
name: 'Slider',
meta: {
title: 'Slider'
},
component: () => import('#/views/components/slider'),
}
export default sliderRouter
router/index.js:
...
import authRouter from './modules/auth'
import sliderRouter from './modules/components/slider'
...
export default new Router({
mode: 'history',
linkActiveClass: "active selected",
routes: [
authRouter, // this work
{
path: '/admin',
name: 'primary',
meta: { requiresAuth: true },
// remastered version
component: loadView('MainLayout'),
children: [
sliderRouter, /* make something like this */
//recent routes
{
path: '/home',
name: 'home',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
// classic version:
component: () => import(/* webpackChunkName: "about" */ '../views/Home.vue')
// component: About
}
]
},
Is it really possible to make the slider router work in such way and inherit from the MainLayout (like a typical child), and also URL would be '/admin/slider'?
I solved it by changing the path in the slider
path: '/slider',
to
path: 'slider',
because it is using like child route which does not require a slash before it`s name
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" ?
I have an Angular 8 app. In my router module I have something like this
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: ':code', component: CodeComponent },
{ path: 'not-found', component: NotFoundComponent},
{ path: '**', component: NotFoundComponent }
];
The problem here is that when I access (for an example) /not-found the component CodeComponent activates, but not the NotFoundComponent.
I want to distinguish /not-found page from parametrized /:code
Invert the order of your routes in your array so the 'not-found' definition comes before the ':code' definition. Like this
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'not-found', component: NotFoundComponent},
{ path: ':code', component: CodeComponent },
{ path: '**', component: NotFoundComponent }
];
I'm having problems to make my http://localhost:8080/myapps/config route load. If I use http://localhost:8080/myapps everything works ok and I get a list of my apps. But when I want to access an app config through http://localhost:8080/myapps/config it loads the content of /myapps again. However, the url in my browser shows the correct path /myapps/config.
I have been checking the routher for some hours but everything seems to be ok. Could anybody shed some light?
My router file:
import Vue from 'vue'
import Router from 'vue-router'
const MyApps = () => import('../views/app/subviews/MyApps');
const AppKeyValue = () => import('../views/app/subviews/AppKeyValue');
import MainView from '../views/app/MainView'
Vue.use(Router)
export default new Router({
mode: 'history',
routes:
[
{
path: '/',
component: MainView,
redirect: 'myapps',
children:
[
{
path: 'myapps',
component: MyApps,
meta:
{
requiresAuth: true,
breadcrumb: 'My Apps'
},
children:
[
{
path: 'config',
component: AppKeyValue,
meta:
{
requiresAuth: true,
breadcrumb: 'App configuration'
}
},
]
},
]
},
]
})
Everything works ok if I don't use child routes:
export default new Router({
mode: 'history',
routes:
[
{
path: '/',
component: MainView,
redirect: 'myapps',
children:
[
{
path: 'myapps',
component: MyApps,
meta:
{
requiresAuth: true,
title: 'message.ecommerce',
breadcrumb: 'My Apps'
},
},
{
path: 'myapps/config',
component: AppKeyValue,
meta:
{
requiresAuth: true,
title: 'message.ecommerce',
breadcrumb: 'App configuration'
}
}
]
}
]}
You didn't post your *.vue components, but I assume you're missing <router-view> in the second level component.
Example:
MainView is mapped to / and has 1 children route (/myapps). You're probably using <router-view> in your MainView.
MyApps is mapped to myapps as a children of the /-route and has 1 children route (/config).
Add a <router-view to your MyApps.vue to let it display its children (which is just /config in your case).
Similarly, a rendered component can also contain its own, nested <router-view>.
https://router.vuejs.org/guide/essentials/nested-routes.html#nested-routes
BTW: That's also why your second router config is working: The main route has two children (/myapps and /myapps/config), which both get displayed by the MainView's <router-view>.
Here is a working example from the documentation:
https://jsfiddle.net/nazgul_mamasheva/zrcLe9z7/1/
I want to default to a specific page when user navigates to the root path
ie when used goes to myapp.com I want to redirect them to myapp.com/defaultpage
My current code is
index.js
import Full from '../containers/Full'
import DefaultView from '../views/DefaultView'
export default new Router({
mode: 'history',
linkActiveClass: 'open active',
scrollBehavior: () => ({ y: 0 }),
routes: [
{
path: '/',
redirect: '/defaultview',
name: 'home',
component: Full,
children: [
{
path: '/defaultview',
name: 'defaultview',
component: DefaultView
},
{
path: '*',
component: NotFoundComponent
}
}
]})
As it is when user goes to myapp.com I get a '404 page not found' - ie the NotFoundComponent. Only when I type in myapp.com/defaultview can I get to the correct page.
Any ideas?
Try this code:
routes: [
{
path: '/',
redirect: '/defaultview'
},
{
path: '/defaultview',
name: 'defaultview',
component: DefaultView
},
{
path: '*',
component: NotFoundComponent
}
]
When using children remove url prefix of the parent
ex:
change "/defaultview" to defaultview remove the parent path component, so the actual code should be like this
routes: [
{
path: '/',
redirect: '/defaultview',
name: 'home',
component: Full,
children: [
{
path: 'defaultview', /* changed */
name: 'defaultview',
component: DefaultView
},
{
path: '*',
component: NotFoundComponent
}
]
}
];
reference Nested Routes
This way is works for me
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import Home from '../components/home/container';
import LiveAgent from '../components/live_agent/container';
import Bot from '../components/bot/container';
import User from '../components/user/container';
const routes = [
{
path: '/',
redirect: '/home'
},
{
component: Home,
name: 'home',
path: '/home'
},
{
component: LiveAgent,
name: 'live_agent',
path: '/live_agent'
},
{
component: Bot,
name: 'bot',
path: '/bot'
},
{
component: User,
name: 'user',
path: '/user'
}
];
export default new VueRouter({
routes // short for routes: routes
})
You can do it using 1 line of code, i.e. by adding router.replace("myPath");. Full code:
import Vue from "vue";
import Router from "vue-router";
import MyComponent from "./my-component";
Vue.use(Router);
const routes = [
{ path: "/myPath", name: "myPath", component: MyComponent }
];
const router = new Router({
mode: "history", // Remove the hash from the URL, optional.
routes
});
router.replace("myPath");
export default router;