路由嵌套

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即可运行查看