vue嵌套路由（二）

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

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

<div id="app">
   
   <router-view></router-view>
</div>
main.js，路由的重定向，就会在页面一加载的时候，就会将home组件显示出来，因为重定向指向了home组件，redirect的指向与path的必须一致。children里面是子路由，当然子路由里面还可以继续嵌套子路由。
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

//引入两个组件
import home from "./home.vue"
import game from "./game.vue"
//定义路由
const routes = [
   { path: "/", redirect: "/home" },//重定向,指向了home组件
   {
       path: "/home", component: home,
       children: [
           { path: "/home/game", component: game }
       ]
   }
]
//创建路由实例
const router = new VueRouter({routes})

new Vue({
   el: '#app',
   data: {
   },
   methods: {
   },
   router
})
home.vue，点击显示就会将子路由显示在出来，子路由的出口必须在父路由里面，否则子路由无法显示。
<template>
   <div>
       <h3>首页</h3>
       <router-link to="/home/game">
           <button>显示<tton>
       </router-link>
       <router-view></router-view>
   </div>
</template>
game.vue
<template>
   <h3>游戏</h3>
</template>

运行后的结果：

点击显示后：

vue嵌套路由（二）

猜你喜欢