如下图,路由嵌套就是页面里面还有子页面,点击安装或者基础可以弹出它内部细节的页面。
三步走
步骤① 新建需要的页面
这里我新建两个,一个是安装一个是基础界面
步骤② 在相应的页面引入
引入是使用了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. 挂上路由