Vue实现路由跳转和嵌套

在实际项目中咱们会碰到多层嵌套的组件组合而成，可是咱们如何实现嵌套路由呢？所以咱们须要在 VueRouter 的参数中使用 children 配置，这样就能够很好的实现路由嵌套。index.html，只有一个路由出口[html] view plain copy<div id="app">      <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 -->      <router-view></router-view>  </div>  main.js，路由的重定向，就会在页面一加载的时候，就会将home组件显示出来，由于重定向指向了home组件，redirect的指向与path的必须一致。children里面是子路由，固然子路由里面还能够继续嵌套子路由。[html] view plain copyimport 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，点击显示就会将子路由显示在出来，子路由的出口必须在父路由里面，不然子路由没法显示。[html] view plain copy<template>      <div>          <h3>首页</h3>          <router-link to="/home/game">              <button>显示<tton>          </router-link>          <router-view></router-view>      </div>  </template>   game.vue[html] view plain copy<template>      <h3>游戏</h3>  </template>  运行后的结果：点击显示后：