• 欢迎光临~

关于vue路由导航的一些问题及思路

开发技术 开发技术 2022-07-22 次浏览

问题一

不在同一个页面的情况下,有多个router-view,当执行router.push({name:'...'})的时候,vue怎么知道在哪个组件的router-view实现跳转?

我的思路

这种情况就属于多级路由的情况,如下图所示
关于vue路由导航的一些问题及思路

页面最外层的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路由导航的一些问题及思路
喜欢 (0)