vue路由嵌套,配置children嵌套路由
嵌套路由就是路由里面嵌套他的子路由,可以有自己的路由导航和路由容器(router-link、router-view),通过配置children可实现多层嵌套
1 //mine组件 2 <template> 3 <div class="content"> 4 在mine的组件里面嵌套路由 5 <router-link to="/mine/c">去到Cpage</router-link> 6 <router-link to="/mine/d">去到Dpage</router-link> 7 <div class="child"> 8 <router-view></router-view> 9 </div> 10 </div> 11 </template>
1 //router.js
2 //引入需要的组件,下是我的路径
3 import Vue from 'vue'
4 import Router from 'vue-router'
5 import Home from '@/components/home'
6 import Mine from '@/components/mine'
7 import Cpage from '@/page/mine/c'
8 import Dpage from '@/page/mine/d'
9 Vue.use(Router)
10
11 export default new Router({
12 routes: [
13 {
14 path: '/',
15 redirect: 'home'
16 },
17 {
18 path: '/home',
19 name: 'home',
20 component: Home
21 },
22 {
23 path: '/mine',
24 name: 'Mine',
25 component:Mine,
26 children:[
27 {
28 path:'/',
29 component:Cpage,
30 },
31 {
32 path:'/mine/c',
33 component:Cpage,
34 },
35 {
36 path:'/mine/d',
37 component:Dpage,
38 }
39 ]
40 //children这是嵌套的部分
41 },
1 //c.vue 2 <template> 3 <div class="top-80"> 4 c.vue 5 <p>这里Cpage文件</p> 6 </div> 7 </template> 8 9 10 //d.vue 11 <template> 12 <div class="top-80"> 13 d.vue 14 <p>这里Dpage文件</p> 15 </div> 16 </template>
嵌套路由通过配置children可实现多层嵌套,其它规则写法一样;
公众号:青梅煮码
小程序:青梅煮码
个人博客:www.dxel.cn

浙公网安备 33010602011771号