When I need to ensure that a component is re-rendered upon reload, I pass a :key with a variable content:
<my-component :key="new Date()" />
I would need to do the same with a component which is called from the routing setup:
import { RouteRecordRaw } from 'vue-router';
import AuthPage from '../pages/AuthPage.vue'
const routes: RouteRecordRaw[] = [
{ path: '/', redirect: '/open' },
{ path: '/auth', component: MainLayoutVue, children: [{ path: '', component: AuthPage, name: 'auth' }], },
];
export default routes;
What is the correct way to pass a :key to the component AuthPage?
Related
Explanation: I have App.vue, Management.vue, Login.vue and Register.vue pages. And I have another folder saying management_pages. In that management folder I have Products.vue and Suppliers.vue files.
What I'm expecting to do: In the App.vue I want the router-view to be for Management.vue, Login.vue and Register.vue only. And when we go to my /management route I want the router-view to be Products.vue (/products) and Suppliers.vue (/suppliers) since the layout of both files are in my Management.vue file. How can I handle such thing?
I have tried this:
import { createRouter, createWebHistory } from "vue-router";
import Products from "../pages/Products.vue";
import Suppliers from "../pages/Suppliers.vue";
import ErrorPage from "../pages/ErrorPage.vue";
import Login from "../pages/Login.vue";
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: "/products",
name: "Products",
component: Products,
},
{
path: "/suppliers",
name: "Suppliers",
component: Suppliers,
},
{
path: "/:pathMatch(.*)*",
name: "ErrorPage",
component: ErrorPage,
},
{
path: "/login",
name: "Login",
component: Login,
},
],
});
export default router;
As stated in the comments, your question is vague, but since you are struggling I will try provide an answer. If I understand your question correctly, you want to define nested routes for /management/products and /management/suppliers.
First you need to add a <router-view></router-view> to your Management.vue component, where you want the content of Products.vue and Suppliers.vue.
Then you need to define the products and supplier routes as children of the management route, like:
routes: [
{
path: "/management",
name: "Management",
component: Management,
children: [
{
path: "products",
name: "Products",
component: Products,
},
{
path: "suppliers",
name: "Suppliers",
component: Suppliers,
},
]
},
{
path: "/login",
name: "Login",
component: Login,
},
{
path: "/:pathMatch(.*)*",
name: "ErrorPage",
component: ErrorPage,
},
],
Be sure to also import the Management.vue in your router file.
If you don't want /management to be a accessible route, you can define a redirect on the /management path to one of the children, like:
redirect: { name: 'Products' }
Hope this helps.
I wanted to change my vue route from /dashboards/dashboard to just /dashboard. How to achieve these using this code
import Layout2 from '#/layout/Layout2'
export default [
{
path: '/dashboards',
component: Layout2,
children: [
{
path: 'dashboard',
name: 'dashboard',
component: () => import('#/components/dashboards/Dashboard')
}
]
}
]
I have tried putting these code but how can I add the layout2 if the component is already added?
export default [
{
path: '/dashboard',
name: 'dashboard',
component: () => import('#/components/dashboards/Dashboard')
}
]
If vue-router document
Note that nested paths that start with / will be treated as a root
path. This allows you to leverage the component nesting without having
to use a nested URL.
You can do
import Layout2 from '#/layout/Layout2'
export default [
{
path: '/',
component: Layout2,
children: [
{
path: 'dashboard',
name: 'dashboard',
component: () => import('#/components/dashboards/Dashboard')
}
]
}
]
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/
My App works just fine, if I put routes without childrens (nesting) but I tried to nest it just now and converted my routes to this: in routes.js
import alphabetsPage from './components/views/pages/alphabets.vue'
import dictionaryPage from './components/views/pages/dictionary.vue'
import numbersPage from './components/views/pages/numbers.vue'
import LayoutView from './components/views/Layout.vue'
const routes = [{
path: '/',
name: 'Home',
component: LayoutView,
children: [{
path: 'basic',
name: 'Basic',
component: alphabetsPage,
children: [{
path: 'alphabets',
name: 'Aphabets',
component: alphabetsPage
},
{
path: 'numbers',
name: 'Numbers',
component: numbersPage
}]
}]
}]
export default routes
If I go to / or click on route <router-link to="/basic/alphabets" tag="li"><a>numbers</a></router-link> I can see the alphabetsPage component, however if I go click on <router-link to="/basic/numbers" tag="li"><a>numbers</a></router-link> the route doesn't work. I have a numbersPage componet working.
This must be from the routes, because, if I don't use children and just define the path in routes as /basic/numbers or /basic/alphabets it works.
Children should be shown somewhere.
Your alphabetsPage do not have in template
const alphabetsPage = {
template: '<div>/basic/alphabets <router-view></router-view></div>'
}
https://jsfiddle.net/6fvL1xwc/
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;