router-view三级路由 怎么写
时间: 2023-06-09 18:05:12 浏览: 92
您可以在 Vue.js 中使用 router-view 组件来实现三级路由。与二级路由相似,您可以在父组件中定义子组件的路径,例如:
```
const router = new VueRouter({
routes: [
{ path: '/home', component: Home },
{ path: '/about', component: About },
{
path: '/users',
component: Users,
children: [
{ path: '', component: UserList },
{ path: ':id', component: UserDetail }
]
}
]
});
```
在上面的代码中,/users 匹配 Users 组件,并且还定义了两个子路由:/users 和 /users/:id。这些子路由的内容将通过 router-view 组件呈现,如下所示:
```
<router-view></router-view>
```
如果您想呈现名为 user 的子组件,则应将其添加到用户路由的 children 数组中,如下所示:
```
{
path: '/users',
component: Users,
children: [
{ path: '', component: UserList },
{ path: ':id', component: UserDetail },
{ path: 'user', component: User }
]
}
```
然后,在父组件中,您可以显示 user 子组件,如下所示:
```
<router-view name="user"></router-view>
```