Vue三层嵌套路由的示例代码

Vue嵌套路由：

实现效果(路由三层嵌套，点击一级tab显示二级tab效果，二级tab点击切换对应内容,不在tab区域里的内容，切换时不重复渲染)：

Demo访问时路径：http://IP:端口/#/routers/

1.建立案例文件夹 page/routers/

1 routers/index.vue

<!-- 二级子路由页面 -->
<router-view />

1-1-1 routers/home/index.vue

1-1-2 routers/home/tab/gj.vue、gn.vue、zx.vue

gj.vue：

gn.vue :

zx.vue：

1-2 routers/news/index.vue

1-2-1 routers/news/tab/gj.vue、gn.vue、zx.vue

gj.vue：

gn.vue：

zx.vue：

1-3-1 routers/yl/index.vue

<!-- 子路由-->
<router-view/>

1-3-2 routers/yl/tab/jd.vue、mx.vue、zx.vue

jd.vue：

mx.vue：

zx.vue：

2.路由配置规则(router/index.js)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!