vue3中router-view
时间: 2023-08-19 14:10:41 浏览: 118
在Vue3中,使用`<router-view>`来渲染路由组件。在主组件中,可以将`<router-view>`放在需要显示路由组件的位置,比如在App.vue中的`<div id="app">`标签内。而在其他页面,也可以使用`<router-view>`来显示对应的路由组件。每一层路径对应一个`<router-view>`,例如,当访问路径为/a时,`<router-view>`会显示App.vue中的路由组件,当访问路径为/a/b时,`<router-view>`会显示a.vue中的路由组件,以此类推。可以通过在VueRouter的参数中使用`children`配置来实现嵌套路由。在嵌套的出口中,可以使用`<router-view>`来渲染组件。需要注意的是,以/开头的嵌套路径会被当作根路径,这样可以方便地使用嵌套组件而无需设置嵌套的路径。\[2\]
参考资料:
\[2\] https://router.vuejs.org/zh/guide/essentials/named-routes.html
#### 引用[.reference_title]
- *1* [Vue3.0学习 - 第十六节,Vue3 中router-view警告解决方案vue-router4.0 keep-alive保存当前页面数据的正确...](https://blog.csdn.net/csl125/article/details/117793176)[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^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [vue <router-view />使用](https://blog.csdn.net/weixin_30699741/article/details/99345372)[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^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [Vue中router-view和子路由的使用方法](https://blog.csdn.net/weixin_44212165/article/details/113399583)[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^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
相关推荐
![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_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)