普通跳转

function add(){
    router.push("/test/demo1/detail?type=create");
}

function clickView(id){
  router.push("/test/demo1/detail?type=view&id="+id);
}

function clickEdit(id){
  router.push("/test/demo1/detail?type=edit&id="+id);
}

router-link

const logout = async ()=>{
  let result=await requestUtil.get("/logout")
  if(result.data.code==200){
    store.commit('SET_ROUTES_STATE',false);
    store.commit('RESET_TABS');
    store.dispatch('logout');//执行store下面的actions下面的logout(){}方法
  }
}


actions: {
  //安全退出   store.dispatch('logout');
  /** 使用示例。
   * store.dispatch('logout')
   .then(() => {
  // 这里可以进行其他的后续操作，比如重定向到登录页面
  console.log("用户已注销");
});
   */
  logout({ commit }) {
    commit('CLEAR_STORE'); // 调用 mutation 清空数据
    router.replace("/login");//跳转到 首页。
  },
},


<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>

在Vue路由中，router.replace()、router.push()和导航守卫中的next()有以下区别：

router.replace("/login")
会替换当前历史记录，不会在浏览器历史栈中留下记录
适合登录后跳转场景，避免用户回退到登录页
与router.push()的主要区别在于是否添加历史记录
router.push("/test/demo1/detail?type=edit&id="+id)
会添加新的历史记录，用户可通过浏览器后退按钮返回
适合普通页面跳转场景
可通过path或name进行跳转
参数可通过query传递，类似GET请求
next({ name: '【首页】' })
在导航守卫中使用，控制路由跳转流程
当to.matched.length为0时处理空白页情况
可通过对象形式指定命名路由跳转
与直接调用router.push/replace不同，这是导航守卫特有的控制方式
next("/login")
在导航守卫中强制跳转到指定路径
常用于权限校验失败时的跳转
会中断当前导航并创建新的导航
<el-menu-item>的index跳转
这是Element UI菜单组件的内置路由跳转方式
实际底层仍会调用router.push()
适合在菜单导航中使用

这些跳转方式的主要差异在于：

是否产生历史记录(replace不产生，push产生)
调用场景(普通跳转或导航守卫中)
参数传递方式(query或params)
是否可控制导航流程(导航守卫特有)