vue-router嵌套路由,嵌套路径问题
想要的效果是,A页面/screen-sit/home ,B页面/screen-sit/*** 都有个/screen-sit
1>
router.js
import Vue from 'vue' // import { // Message // } from 'element-ui' import VueRouter from 'vue-router' //解决vue路由重复的时候,点击报错问题 // const originalReplace = VueRouter.prototype.replace // VueRouter.prototype.replace = function replace(location) { // return originalReplace.call(this, location).catch(err => err) // } // const originalPush = VueRouter.prototype.push // VueRouter.prototype.push = function push(location) { // return originalPush.call(this, location).catch(err => err) // } Vue.use(VueRouter) export const routes = [ { path: "/", name: "login", component: () => import('@/views/login/index.vue') }, { path: '/screen-sit', name: 's', //加上这段不触发跳转,而是直接打开子集合 component:{ render(c){ return c('router-view') } }, children: [ { path: '/screen-sit/home', name: 'home', component: () => import('@/views/home/two.vue'), }, { path: '/screen-sit/multi-prjs', name: 'multi-prjs', component: () => import('@/views/multiPrjs/layout/index.vue'), }, { path: '/screen-sit/single-design', name: 'single-design', component: () => import('@/views/singleDesign/layout/index.vue'), }, ] }, { path: '/404', name: '404', component: () => import('@/views/error/404.vue') }, { path: '/:pathMatch(.*)', redirect: '/404' } ] const router = new VueRouter({ //mode:'history', mode: 'hash', base: process.env.BASE_URL, routes }) export default router
跳转页面
<template> <div class="home-cont"> <ul> <li v-for="(item, index) in list" :key="index" @click="ToBlack(item.path)" > {{ item.name }} </li> </ul> </div> </template> <script> //import AA from "@/components/AA"; export default { // components: { AA }, props: {}, data() { return { list: [ { name: "项目集成管理智慧运营中心", path: "multi-prjs", }, { name: "设计看板", path: "single-design", }, { name: "开发看板", }, ], }; }, computed: {}, watch: {}, created() {}, mounted() {}, destroyed() {}, methods: { ToBlack(val) { console.log(val); this.$router.push({ name: val }); }, }, }; </script> <style lang="less" scoped> .home-cont { font-size: 26px; color: #fff; ul > li { width: 30%; float: left; height: 300px; cursor: pointer; } } </style>
总结:这种写法,跳转必须用name,不能用path,否则有bug
2>
{ path: '/screen-sit', name: 's', //加上这段不触发跳转,而是直接打开子集合 component:{ render(c){ return c('router-view') } }, children: [ { path: 'home', name: 'home', component: () => import('@/views/home/two.vue'), }, { path: 'multi-prjs', name: 'multi-prjs', component: () => import('@/views/multiPrjs/layout/index.vue'), }, { path: 'single-design', name: 'single-design', component: () => import('@/views/singleDesign/layout/index.vue'), }, ] },
当children的path不带'/',就会自动跟父级路径
this.$router.push({ name: "home" });就会跳转成http://10.100.14.104:8080/#/screen-sit/home
要注意,以 /
开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。