Skip to content

Commit

Permalink
总结多级路由
Browse files Browse the repository at this point in the history
  • Loading branch information
Panyue-genkiyo committed Oct 11, 2021
1 parent fbb67c1 commit f1690b9
Showing 1 changed file with 37 additions and 0 deletions.
37 changes: 37 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -738,5 +738,42 @@ module.exports = {
```vue
<router-view></router-view>
```
### 2.几个注意点

1. 路由组件通常存放在```pages```文件夹,一般组件通常存放在```components```文件夹。
2. 通过切换,“隐藏”了的路由组件,默认是被销毁掉的,需要的时候再去挂载。
3. 每个组件都有自己的```$route```属性,里面存储着自己的路由信息。
4. 整个应用只有一个router,可以通过组件的```$router```属性获取到。

### 3.多级路由(多级路由)

1. 配置路由规则,使用children配置项:

```js
routes:[
{
path:'/about',
component:About,
},
{
path:'/home',
component:Home,
children:[ //通过children配置子级路由
{
path:'news', //此处一定不要写:/news
component:News
},
{
path:'message',//此处一定不要写:/message
component:Message
}
]
}
]
```

2. 跳转(要写完整路径):

```vue
<router-link to="/home/news">News</router-link>
```

0 comments on commit f1690b9

Please sign in to comment.