【Vue学习总结】Vue路由中的嵌套

接上篇《19.编程式导航和Hash以及History模式》

上一篇我们讲解了路由的编程式导航、Hash模式以及History模式，了解了Vue中路由的几种切换方式，本篇我们来路由中的嵌套。
本系列博文使用的Vue版本：2.6.11

一、什么是路由嵌套

路由的嵌套，也可以称为“父子路由”，即在一个路由中又包含了另一个路由。
例如下面的ElementUI的中文网站页面，上面的“指南”和“组件”的导航栏，点击后会直接刷新整个页面，进行新的路由页面的跳转。而单独点击“组件”下左侧的栏目链接，仅刷新右侧的内容区域，不会刷新整个页面，此时左侧链接“自定义主题”和上面导航链接“组件”就是一个路由嵌套，也可以叫“父子路由”：

实现路由嵌套的方法很简答，只需要在定义路由的时候，为该路由定义一个“children”参数，该参数为此路由的嵌套路由，也是“子路由”，是一个数组，内容结构和上面的主路由一样，只是path前不需要添加”/“了：

import User from '@/components/Demo'
import User from '@/components/Demo/DemoAdd'
import User from '@/components/Demo/DemoDel'
import User from '@/components/Demo/DemoUpdate'
import User from '@/components/Demo/DemoView'

const routes = [
  {
     path:'/demo',
     component: Demo,
     children:[
        {path:'demo-add',component: DemoAdd},
        {path:'demo-del',component: DemoDel},
        {path:'demo-update',component: DemoUpdate},
        {path:'demo-view',component: DemoView}
     ]
  }
];

这里的所有component都是普通的vue组件，在之前import引入即可。
这样在Demo主页面中，设置相应的链接，就可以在Demo主页面的router-view加载嵌套的路由页面，而不会刷新到其他的组件。

二、实现路由嵌套

我们在之前的工程中，在组件下新建一个User.vue，开发一个“用户中心”：

然后在router.js中添加并引入该组件：

//...其它部分代码省略...
import User from '@/components/User'
Vue.use(Router)

//2、定义路由
const routes = [
  {path:'/helloWorld',component: HelloWorld},
  {path:'/user',component: User}
  //...其它部分代码省略...
]

然后在HelloWorld.vue中添加该模块的导航：

<template>
  <div id="app">
    <div class="header-css">
      <router-link to="/helloWorld">首页</router-link>
      <router-link to="/news">新闻</router-link>
      <router-link to="/user">用户</router-link>
    </div>
    <router-view/>
  </div>
</template>

效果：

我们来完善User.vue的代码，来实现一个左右分栏的效果：

<template>
  <div id="user">
    <div class="user-info">
       <div class="left">
         <ul>
           <li>用户列表</li>
           <li>新增用户</li>
         </ul>
       </div>
       <div class="right">
         内容区域
       </div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'user',
  data () {
      return {
        msg: '用户中心'
      }
  }
}
</script>
 
<style scoped>
   .user-info{
     display: flex;
   }
   .user-info li{
     line-height: 20px;
   }
   .left{
      width: 200px;
      min-height: 400px;
      border-right: 1px solid #eee;
    }
    .right{
      flex: 1;
      /**解释：
         flex：1即为flex-grow：1，
         经常用作自适应布局，将父容器的display：flex，
         侧边栏大小固定后，将内容区flex：1，
         内容区则会自动放大占满剩余空间。 
      */
    }
</style>

效果：

上面只是个草图，还不能实现嵌套路由的效果，我们来一步步实现（上面用到了flex布局，想了解的童鞋看最下面的参考链接）。
首先为User页面创建其两个子组件：

这里为新增用户和用户列表的组件，这里不编写复杂业务，仅编写template显示一段文本即可：

<template>
  <div id="userList">
    用户列表
  </div>
</template>

<template>
  <div id="userAdd">
    新增用户
  </div>
</template>

然后我们在router.js中引入新增用户页面的子组件，并将它们设置在User组件路由的子路由参数“children”中：

import HelloWorld from '@/components/HelloWorld'
import User from '@/components/User'
import UserAdd from '@/components/User/UserAdd'
import UserList from '@/components/User/UserList'

Vue.use(Router)

//2、定义路由
const routes = [
  { path: '/helloWorld', component: HelloWorld },
  {
    path: '/user', 
    component: User, 
    children: [
      { path: 'userAdd', component: UserAdd },
      { path: 'userList', component: UserList }
    ]
  }
]

然后我们重新修改User.vue，为左侧菜单增加链接，右侧增加router-view显示子路由内容：

<template>
  <div id="user">
    <div class="user-info">
       <div class="left">
         <ul>
           <li>
             <router-link to="/user/userList">用户列表</router-link>
           </li>
           <li>
             <router-link to="/user/userAdd">新增用户</router-link>
           </li>
         </ul>
       </div>
       <div class="right">
         <router-view></router-view>
       </div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'user',
  data () {
      return {
        msg: '用户中心'
      }
  }
}
</script>
 
<style scoped>
   .user-info{
     display: flex;
   }
   .user-info li{
     line-height: 20px;
   }
   .left{
      width: 200px;
      min-height: 400px;
      border-right: 1px solid #eee;
    }
    .right{
      flex: 1;
      /**解释：
         flex：1即为flex-grow：1，
         经常用作自适应布局，将父容器的display：flex，
         侧边栏大小固定后，将内容区flex：1，
         内容区则会自动放大占满剩余空间。 
      */
    }
</style>

效果：

这就实现了一个路由嵌套的效果。

三、总结

实现一个嵌套路由的效果，需要以下步骤：
1、设置路由，定义需要嵌套子路由的父路由的children参数：

import User from '@/components/Demo'
import User from '@/components/Demo/DemoAdd'
import User from '@/components/Demo/DemoDel'

const routes = [
  {
     path:'/demo',
     component: Demo,
     children:[
        {path:'demo-add',component: DemoAdd},
        {path:'demo-del',component: DemoDel}
     ]
  }
];

2、在父路由里配置子路由的链接以及其显示的地方（router-view）

<div class="left">
 <ul>
   <li>
     <router-link to="/demo/demo-add">新增Demo</router-link>
   </li>
   <li>
     <router-link to="/demo/demo-del">删除Demo</router-link>
   </li>
 </ul>
</div>
<div class="right">
 <router-view></router-view>
</div>

以上就是Vue嵌套路由的所有内容。下一篇我们来介绍Vue的UI框架Mint UI的使用。

参考：
《IT营：itying.com-2018年Vue2.x 5小时入门视频教程》
《Flex 布局语法教程》（https://www.runoob.com/w3cnote/flex-grammar.html）

转载请注明出处：https://blog.csdn.net/acmman/article/details/111091948

本文地址：https://blog.csdn.net/u013517797/article/details/111091948