vuex全家桶系列07-嵌套路由的使用

1.嵌套路由：

🍊首先来看下src/router/index.js文件:

• 添加children属性,注意是数组啊，的path不要加"/"

import Vue from "vue";
//1、导入 vuerouter
import VueRouter from "vue-router";
//2、模块化机制，使用vuerouter
Vue.use(VueRouter);
import Home from "@/views/Home";
import About from "@/views/About";
import User from "@/views/User";
//3、创建路由器对象，并在VueRouter中配置路由信息对象
export default new VueRouter({
  mode:"history",
  routes:[
		//	...
    {
      path:"/about",
      name:"about",
      component:About,
      alias:"/love",  //alias给路由起别名，当我匹配到love的时候，会匹配到about这里
      children:[
        {
          path:"zara",
          name:"zara",
          component:()=>import("@/views/Zara")
        },
        {
          path:"reebok",
          name:"reebok",
          component:()=>import("@/views/Reebok")
        }
      ]
    },
  //...
  ]
})

🍊现在是在about组件下面设置了嵌套路由，那么路由的出口router-view也是需要在About组件中:

• 这里的to属性后面的是"/about/zara",而不是about/zara
• 这里走命令路由：:to="{name:'zara'}"也可以走通切换流程🤔

//About.vue
<template>
<div class="about">
    <h1>爱琳琳真的是太好了</h1>
    <router-link to="/about/zara">进入zara子专区</router-link><br />
    <router-link to="/about/reebok">我来到了reebok专区</router-link>
    <router-view></router-view>
</div>
</template>