vue-router 巢狀路由

豬豬是天才發表於2018-12-19
Vue巢狀路由

背景：vue 專案，最近研究了一下 vue-router 巢狀路由，簡單說，就是我們平時看到的多級路由，例如：/user/project 等等，不僅從直觀看上去更清晰明瞭，也減少了一些不必要的程式碼，下面會主要介紹 vue-router 的 children 屬性

優點：父路由的東西，子路由可以繼承，省去了同樣的元件重複引用

程式碼如下：

（本 demo 為 父路由提供側邊欄，子路由只改變右側內容區...）

1./router/index.js 配置巢狀路由關係

{
      path: '/父路由',
      component: resolve => require(['@/views/xx/xxx'], resolve), // 父路由的公共部分
      children: [
        {
          path: '', // 進入父路由時，右側內容區首先顯示的內容
          name: 'xxx',
          component: resolve => require(['@/views/xx/xxx'], resolve)
        },
        {
          path: 'xxx',// 其他子路由，這裡注意，不要加 '/'，否則會匹配根路由
          name: 'xxx',
          component: resolve => require(['@/views/xx/xxx'], resolve)
        }
      ]
    },
複製程式碼

2.父路由.vue

ps：這裡注意一下，router-link to="/父路由/自路由"，一定要帶上父路由

<template>
<el-container>
  <el-aside>
    <el-menu v-show="isCollapse" style="padding: 0 10px;" :default-active="1" class="el-menu-vertical-demo">
      <router-link to="/父路由"><el-menu-item index="1">1</el-menu-item></router-link>
      <router-link to="/父路由/子路由"><el-menu-item index="2">2</el-menu-item></router-link>
    </el-menu>
  </el-aside>
  <el-main>

    <router-view></router-view> // 子路由檢視變化區域

  </el-main>
</el-container>
</template>
複製程式碼

3. 子路由就可以只關注檢視部分，不用再引用側邊欄的公用部分了～檢視會在父路由裡的<router-view></router-view> 中更新

ok，大功告成！


相關文章