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

要注意，以 / 開頭的嵌套路徑會被當作根路徑。 這讓你充分的使用嵌套組件而無須設置嵌套的路徑。