WRM
0%

路由的嵌套

发表于 分类于 ，

例如，需要在/home下嵌套food和clothes即/home/food和/home/clothes

1.创建对应的子组件

新建HomeFood.vue和HomeClothes.vue文件，添加对应的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!--HomeFood.vue-->
<template>
  <div>
    <div>我是HomeFood相关内容</div>
    <ul>
      <li>HomeFood</li>
      <li>HomeFood</li>
      <li>HomeFood</li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "food"
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!--HomeFood.vue-->
<template>
  <div>
    <div>我是HomeFood相关内容</div>
    <ul>
      <li>HomeFood</li>
      <li>HomeFood</li>
      <li>HomeFood</li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "food"
};
</script>

2.挂载在router实例下

在这里插入图片描述
所有代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
import Vue from 'vue'
import vueRouter from 'vue-router'
import home from '../components/home.vue'
import about from '../components/about.vue'
import User from '../components/User'
const food = () =>
    import ("../components/HomeFood.vue");
    // 懒加载
const clothes = () =>
    import ("../components/HomeClothes.vue");
Vue.use(vueRouter);

const routes = [{
        path: "/",
        name: home,
        redirect: "/home",
        component: home,
    },
    {
        path: "/home",
        name: home,
        component: home,
        children: [{
                path: "food",
                name: food,
                component: food
            },
            {
                path: "clothes",
                name: clothes,
                component: clothes
            }
        ]

    },
    {
        path: "/about",
        name: about,
        component: about
    },
    {
        path: "/User/:userId",
        component: User,
        name: User,
    }
];

const router = new vueRouter({
    routes,
    mode: 'history',
    linkActiveClass: "active"
})

export default router;

3.在home.vue文件下添加使用子组件

在这里插入图片描述