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

原创

echohye 2022-08-01 10:31:58 博主文章分类：Vue学习 ©著作权

文章标签 二级多级路由配置 文章分类 运维

©著作权归作者所有：来自51CTO博客作者echohye的原创作品，请联系作者获取转载授权，否则将追究法律责任

问题一

不在同一个页面的情况下，有多个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>