关于vue路由导航的一些问题及思路
2022/7/23 6:22:49
本文主要是介绍关于vue路由导航的一些问题及思路,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
问题一
不在同一个页面的情况下,有多个router-view
,当执行router.push({name:'...'})的时候,vue怎么知道在哪个组件的router-view
实现跳转?
我的思路
这种情况就属于多级路由的情况,如下图所示
页面最外层的router-view
一般就是一级路由,而二级路由是嵌套在各个一级路由的里面。
比如上图,我在操作router.push({name:"Main"})和router.push({name:"login"})的时候,vue只会在最外层的router-view
进行路由切换。
如果我操作router.push({name:"home"}),那vue会自动寻找组件Main组件里的router-view,进行二级路由的切换,它不会去组件login下找router-view
,更不会去找最外层的router-view
。
反正就是push
哪个组件路由,vue就会寻找其路由配置的父组件下的router-view
,然后就是这样一级套一级,形成多级路由。
问题二
同个页面的情况下,有多个router-view
,当执行router.push({name:'...'})的时候,vue怎么知道在组件下的哪个router-view
实现跳转?
我的思路
children里的components是带有s
的,并且components中的key对应页面中router-view
的name属性,key是default则对应无name属性的router-view
.
//js import a from '../components/a.vue' import b from '../components/b.vue' import c from '../components/c.vue' const routes = [ { path: '/', name: 'main', component: () => import('../views/main.vue'), children: [ { path: '', name: 'many', components: { default: a, bb: b, cc: c} } ] }
//html <template> <div class="many-router-view"> <h1>多个router-view</h1> <div class="box"> <div class="item"> <h4>default</h4> <router-view/> </div> <div class="item"> <h4>bb</h4> <router-view name="bb"/> </div> <div class="item"> <h4>cc</h4> <router-view name="cc"/> </div> </div> </div> </template>
这样就可以在一个页面使用多个路由出口了
这篇关于关于vue路由导航的一些问题及思路的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist
- 2024-03-11icons for vue
- 2024-03-07breadcrumbs react js
- 2024-03-06react login page example
- 2024-03-06react router uselocation
- 2024-03-04postgres jsonb_set