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 {
     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

要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。