路由children
时间: 2023-11-07 19:19:09 浏览: 54
路由的children配置是用来定义子路由的。在VueRouter的参数中使用children配置来添加子路由。需要注意的是,在children中,子路由的路径不需要加斜杠/。
如果想要直接显示儿子路由或者女儿路由,可以在路由配置文件中使用redirect重定向来实现。具体的配置代码如下所示:
```javascript
children: [
{ path:"", redirect:"routerboy" },
{ path:"routerboy", name:"routerboy", component:routerboy },
{ path:"routergirl", name:"routergirl", component:routergirl }
]
```
在主路由页面routerindex的代码中,首先要写入<router-view></router-view>来添加路由视图。然后使用router-link并写上子路由的位置路径,注意,这里需要写上完整的路径。例如:
```html
<template>
<div>
<h3>路由首页</h3>
<router-link to="/routerproject/routerindex/routerboy">跳转至儿子路由页面</router-link>
<router-link to="/routerproject/routerindex/routergirl">跳转至女儿路由页面</router-link>
<router-view></router-view>
</div>
</template>
```
以上是关于路由的children配置和使用的一些说明和示例代码。通过配置和使用子路由,可以实现在Vue应用中进行页面之间的切换和导航。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>
#### 引用[.reference_title]
- *1* *2* *3* *4* [Vue --- router,路由嵌套children的基本使用](https://blog.csdn.net/qq_21980517/article/details/100073887)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)