Vue.js路由 -- 嵌套路由

嵌套路由

一些比较复杂的应用会有多层嵌套的路由和组件组成

在应用增加一个用户个人中心，用户中心又是由多个页面组成，如：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5ceXcESA-1590917235040)(assets/vue-router-usercenter.png)]

1. 添加路由与子路由

...
import User from './views/User.vue'
import Profile from './views/User/Profile'
import Cart from './views/User/Cart.vue'
...

...
{
  path: '/user',
  component: User,
  children: [
		{
			path: '',
			name: 'user',
			component: Profile
		},
    {
      path: 'cart',
      name: 'user-cart',
      component: Cart
    }
  ]
}
...

children 属性

一个路由中的 children 表示嵌套的子路由

• 子路由的 path 如果以 / 开头表示根路径，不再基于父级路径，否则基于父级 path
• 如果一个子路由的 path 为空，表示为默认子路由
• 如果一个路由有默认子路由，则父级 name 属性需要设置给这个默认子路由

2. 子路由视图

有了子路由以后，还需要在视图组件中设置 router-view

// User.vue
<template>
    <div>
        <h3>用户中心</h3>
        <ul class="left">
            <router-link exact tag="li" :to="{name: 'user'}">基本信息</router-link>
            <router-link tag="li" :to="{name: 'user-cart'}">我的购物车</router-link>
        </ul>
        <div class="right">
            <router-view></router-view>
        </div>
    </div>
</template>

<style scoped>
.left {
    float: left;
    width: 200px;
}
.left li {
    line-height: 30px;
    cursor: pointer;
}
</style>