vue-router

文章目录

vue-router嵌套路由添加路由与子路由children 属性 子路由视图

嵌套路由

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

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

添加路由与子路由

... 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 属性需要设置给这个默认子路由

子路由视图

有了子路由以后，还需要在视图组件中设置 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>