Vue路由嵌套详解

Vue路由嵌套详解

---

嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件组合而成。

demo

1.创建用户信息组件，在 views/user 目录下创建一个名为 Profile.vue 的视图组件；

<template>
<h1>个人信息</h1>
</template>

<script>
export default {
   
  name: "UserProfile"
}
</script>

<style scoped>
</style>

2.在用户列表组件在 views/user 目录下创建一个名为 List.vue 的视图组件；

<template>
<h1>用户列表</h1>
</template>

<script>
export default {
   
  name: "UserList"
}
</script>

<style scoped>

</style>

3.修改首页视图，我们修改 Main.vue 视图组件，此处使用了 ElementUI 布局容器组件，代码如下：

<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <el-menu :default-openeds="['1']">
          <el-submenu index="1">
            <template slot="title">