vue 中<router-view />使用
在APP.vue主组件中,内容上就只有<router-view></router-view>,然后在其他页面也有<router-view></router-view>,可以理解为:
一层路径(/xxx
)对应一个router-view
比如url: /a/b/c (假设a、b、c都为正常路径,不会作为参数)
- 那
/a
对应的就是App.vue中的router-view,/a
进入a.vue
中 - 那
/a/b
对应的就是a.vue中的router-view,/a/b
进入b.vue
中
1 2 3 |
|
当访问/foo时,router-view就被Foo组件代替了
1 2 3 4 5 |
|
嵌套路由
组件中依然可以使用<router-view />,要在嵌套的出口中渲染组件,需要在 VueRouter
的参数中使用 children
配置:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
要注意,以 /
开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。
eg:https://router.vuejs.org/zh/guide/essentials/named-routes.html