路由嵌套

Vue嵌套路由：
实现效果(路由三层嵌套，点击一级tab显示二级tab效果，二级tab点击切换对应内容,不在tab区域里的内容，切换时不重复渲染)：

1. 项目中安装路由：

npm install vue-router --save

2. 创建route文件夹，并添加并编写路由配置文件index.js

3.在App.vue中配置根路由出口:

<!--App.vue-->
<template>
    <div id="app">
        <!--根路由出口-->
        <router-view/>
    </div>
</template>

4.在main.js中引入路由配置文件，并挂载路由

// main.js
import Vue from 'vue'
import myRoute from './router/index' //引入路由配置文件 route/index
import App from './App.vue'

Vue.config.productionTip = false;

new Vue({
  router:myRoute,//挂载路由myRoute 可自定义，映射到router
  render: h => h(App),
}).$mount('#app');

5.注意：包含子路由的vue组件都要留出路由出口，比如：

<!--Home组件-->
<template>
    <div id="home">
        <h1>home信息</h1>
        <div id="currentList">
            <router-link to="/home/hGuoJi">国际HOME</router-link>
            <router-link to="/home/hGuoNei">国内HOME</router-link>
            <router-link to="/home/hZuiXin">最新HOME</router-link>
        </div>
        <!--Home组件路由出口-->
        <router-view />
    </div>
</template>

6.路由重定向，有三种方法：1.字符串重定向，2.命名路由重定向 3.函数方法，动态返回重定向目标。可以在index.js中查看：

// redirect:"/home/hGuoJi", //字符串重定向
// redirect:{name:"hGuoJi"}, //命名路由重定向
redirect:to=>{ //方法，动态返回重定向目标
    // 方法接收 目标路由 作为参数
    // return 重定向的 字符串路径/路径对象
    return "/home/hGuoJi"
},

7.Demo地址，请下载，并npm run serve即可运行查看