嵌套路由与重定向

如下图，路由嵌套就是页面里面还有子页面，点击安装或者基础可以弹出它内部细节的页面。

---

三步走

步骤① 新建需要的页面

这里我新建两个，一个是安装一个是基础界面

步骤② 在相应的页面引入

引入是使用了children:[]，这个数组，需要注意的是路径前面不再加/，如果加了就变成了根目录，不加就会在你设置目录的子目录。

{
    path: '/zhinan',
    component: () => import('../views/ZhiNan.vue'),
    redirect: "/zhinan/anzhuang",
    children:[
      {
        path: 'anzhuang',
        component:() => import("../views/Anzhaung.vue")
      },
      {
        path: 'base',
        component: () => import("../views/Base.vue")
      },
    ]
  },

步骤③ 在写进父一级的界面

这个我是挂在anzhuang这个目录下面的，并在下面写一个出口。

<template>
    <div>
        <h3>指南界面</h3>
        <div style="float:left; width:100px; height:100px">
            <router-link to="/zhinan/anzhuang">安装</router-link> 
            <br>
            <router-link to="/zhinan/base">基础</router-link>
        </div>
        <router-view></router-view>
    </div>

</template>

总结

挂路由一共也就只有三个步骤：1.写页面 2. 在index.js里面注册好路由地址 3. 挂上路由