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嵌套路由的主要内容,如果未能解决你的问题,请参考以下文章
Vue总结第五天:vue-router (使用模块化(创建Vue组件)机制编程)router-link 标签的属性路由代码跳转懒加载路由嵌套(子路由)路由传递数据导航守卫)
vue全家桶的使用<router-view>routerviewvueX嵌套路由子路由动态路由路由拦截路由守卫elementUiSPA