1. 定义路由规则
```js
const routes = [
{
path: '/home',
name: 'Home',
component: HomeView,
children: [
{path: 'User',component: User},
{path: 'Role',component: Role},
{path: 'QuestionView',component: QuestionView},
]
},
// 重定向
{
path: '/User',
redirect: '/home/User'
},
{
path: '/Role',
redirect: '/home/Role'
},
{
path: '/QuestionView',
redirect: '/home/QuestionView'
}
];
```
- **`/home` 路由**：对应 `HomeView` 组件，作为父路由。
- **子路由**：`/home/User`、`/home/Role` 和 `/home/QuestionView` 分别对应 `User`、`Role` 和 `QuestionView` 组件。
- **重定向规则**：将 `/User`、`/Role` 和 `/QuestionView` 重定向到对应的嵌套路由，方便用户直接访问。
##### 组件布局（`App.vue`）
```vue
<template>
<div class="box">
<div class="aside bor">
<RouterLink to="/User">用户管理</RouterLink>
<RouterLink to="/Role">角色管理</RouterLink>
<RouterLink to="/QuestionView">题库管理</RouterLink>
</div>
<div class="content bor">
<RouterView></RouterView>
</div>
</div>
</template>
```
##### 2. 样式部分
```css
a {
display: inline-block;
width: 100%;
height: 80px;
text-align: center;
line-height: 80px;
text-decoration: none;
}
a:hover {
background-color: palevioletred;
color: orangered;
}
* {
margin: 0px;
padding: 0px;
}
.box {
width: 100vw;
height: 100vh;
display: flex;
background-color: aquamarine;
}
.bor {
border: 1px solid;
}
.aside {
width: 200px;
height: calc(100vh - 4px);
}
.content {
flex: 1;
color: black;
}
```
### 命名路由
- 命名路由允许我们使用路由的 `name` 属性而不是 `path` 来进行导航。
1. 常规路由配置
```js
const routes = [
{
path: '/',
name: 'Home',
component: HomeView,
children: [
{
path: 'User',
name: 'User',
components: {
left: User,
right: Role
}
}
]
},
{
path: '/User',
redirect: '/User'
},
{
path: '/Role',
redirect: '/Role'
}
];
```