vue嵌套路由

Posted 于文静0727

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue嵌套路由相关的知识,希望对你有一定的参考价值。

在实际项目中我们会碰到多层嵌套的组件组合而成,但是我们如何实现嵌套路由呢?因此我们需要在 VueRouter 的参数中使用 children 配置,这样就可以很好的实现路由嵌套。

index.html,只有一个路由出口

1 <div id="app">  
2     <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 -->  
3     <router-view></router-view>  
4 </div> 

 

main.js,路由的重定向,就会在页面一加载的时候,就会将home组件显示出来,因为重定向指向了home组件,redirect的指向与path的必须一致。children里面是子路由,当然子路由里面还可以继续嵌套子路由。

 1 import Vue from \'vue\'  
 2 import VueRouter from \'vue-router\'  
 3 Vue.use(VueRouter)  
 4   
 5 //引入两个组件  
 6 import home from "./home.vue"  
 7 import game from "./game.vue"  
 8 //定义路由  
 9 const routes = [  
10     { path: "/", redirect: "/home" },//重定向,指向了home组件  
11     {  
12         path: "/home", component: home,  
13         children: [  
14             { path: "/home/game", component: game }  
15         ]  
16     }  
17 ]  
18 //创建路由实例  
19 const router = new VueRouter({routes})  
20   
21 new Vue({  
22     el: \'#app\',  
23     data: {  
24     },  
25     methods: {  
26     },  
27     router  
28 })  

 

home.vue,点击显示就会将子路由显示在出来,子路由的出口必须在父路由里面,否则子路由无法显示。

1 <template>  
2     <div>  
3         <h3>首页</h3>  
4         <router-link to="/home/game">  
5             <button>显示<tton>  
6         </router-link>  
7         <router-view></router-view>  
8     </div>  
9 </template>  

 

game.vue

1 <template>  
2     <h3>游戏</h3>  
3 </template>

 

运行后的结果:

点击显示后:

 

以上是关于vue嵌套路由的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段11——vue路由的配置

Vue总结第五天:vue-router (使用模块化(创建Vue组件)机制编程)router-link 标签的属性路由代码跳转懒加载路由嵌套(子路由)路由传递数据导航守卫)

vue全家桶的使用<router-view>routerviewvueX嵌套路由子路由动态路由路由拦截路由守卫elementUiSPA

Vue教程(四十三)路由嵌套

Vue教程(四十三)路由嵌套

vue路由嵌套