router-link

<template>
    <el-dropdown >
    <span class="el-dropdown-link">
      <el-avatar :size="40" :src="squareUrl" />
       &nbsp;&nbsp; {{currentUser?.trueName}}
      <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
    </span>
        <template #dropdown>
            <el-dropdown-menu>

                <el-dropdown-item>
                    <router-link :to="{name:'个人中心'}">个人中心</router-link>
                </el-dropdown-item>

                <el-dropdown-item @click="logout">安全退出</el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>


const routes = [
  {
    path: '/',
    name: '【首页】',
    component: ()=> import('../layout/index'),
    redirect:'/index',//重定向到别的路径 。 layout里面的 <router-view/>重定向到.index 相当于首页
    children:[
      {
        path: '/index',
        name: '首页',
        component: () => import(/* webpackChunkName: "about" */ '../views/index/index')
      },
      {
        path: '/userCenter',
        name: '个人中心',
        component: () => import(/* webpackChunkName: "about" */ '../views/userCenter/index')
      }
    ]
  }

这是路由守卫上面的跳转。

router.beforeEach((to,from,next)=>{
    const whiteList=['/login','/test','/test2','/test/qr','/mofang/qr/code'] // 白名单
    let token=store.getters.GET_TOKEN;
    console.log("to:",to);
    console.log("to.matched:",to.matched);
    console.log("from:",from);
    //如果 to.matched  长度是0  那么 就是打开 的空白 页面.

    //
    console.log("router.options.routes.children:",router.options.routes.children);
    //打开 我们的tab页面 刷新一下这个to.matched就是0 页面是空白的.  其它情况这里面都有2个值.1个父 1个是子
    if(to.matched.length==0){
        //如果用户刷新磁面了。可能会跳转空白页面。这里加个判断，跳转首页。
       next({ name: '【首页】' });
    }
    
    //在白名单之中 放行。
   next();


//不在白名单之中  跳转到 登录
next("/login")

菜单上面是以index 作为路径跳转的。

 
<template>
    <el-menu

            active-text-color="#ffd04b"
            background-color="#2d3a4b"
            class="el-menu-vertical-demo"
            text-color="#fff"
            router
            :default-active="activeIndex"
            mode="vertical"
            :collapse="false"
            :collapse-transition="false"
    >
<!--      是否启用 vue-router 模式。 启用该模式会在激活导航时以 index 作为 path 进行路由跳转
使用 default-active 来设置加载时的激活项。-->

      <el-menu-item index="/index" :collapse="true">
            <el-icon><home-filled /></el-icon>
            <span>首页</span>
        </el-menu-item>

        <el-sub-menu :index="menu.path" v-for="menu in menuList">
            <template #title>
                <el-icon><svg-icon :icon="menu.icon"/></el-icon>
                <span>{{ menu.name }}</span>
            </template>
            <el-menu-item  :index="item.path" v-for="item in menu.children"  @click="openTab(item)">
                <el-icon><svg-icon :icon="item.icon"/></el-icon>
                <span>{{ item.name }}</span>
            </el-menu-item>
        </el-sub-menu>
    </el-menu>
</template>