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>  運行後的結果：點擊顯示後：