首页 > 其他分享 >Vue3路由的redirect重定向结合函数实现不同的用户身份跳转到不同的首页

Vue3路由的redirect重定向结合函数实现不同的用户身份跳转到不同的首页

时间:2023-01-05 13:23:47浏览次数:44  
标签:redirect return 重定向 跳转 用户 首页 Vue3

访问网页主域名的时候,识别用户身份跳转到不同的首页,配置路由重定向
const routes: Array<RouteRecordRaw> = [
  // 访问主域名的时候,根据用户的登录信息,重定向到不同的页面
  {
    path: "/",
    redirect: () => {
      // loginInfo是从后台返回的用户信息
      const {groupdId} = loginInfo;
    
      // 根据组别ID进行跳转
      switch(groupdId) = {
        // 管理员跳转到仪表盘
        case 1:
          return "/dashboard";
        // 普通用户跳转到首页
        case 2:
          return "/home";
        // 其他用户都认为未登录,跳转到登录页
        default: 
          return "/login";
      }
    }
  }
]

标签:redirect,return,重定向,跳转,用户,首页,Vue3
From: https://www.cnblogs.com/openmind-ink/p/17027261.html

相关文章

  • Unity跳转场景报空指针解决
    当跳转场景时,有时候会出现空指针问题。解决办法:将即将跳转到的scene添加到BuildSettings里面。举个例子:例如从某个场景要跳转到network这个场景中,那么BuildSettings里面必......
  • vue2 vue3 禁用F12控制台 打印渲染新内容 禁用右键等
    constdisabled=()=>{//console.log('禁止脚本,运行成功');constconfig={rightKey:false,//是否开启右键菜单controller:fal......
  • Vue3中操作子组件实例
    子组件Child.vue<template><hr/>{{INFO}}<hr/><button@click="changeInfo">changeInfo</button></template><scriptsetuplang="ts">import{ref,r......
  • a标签跳转微信小程序
    <adata-miniprogram-appid="wx88ed27696de5b9a1"data-miniprogram-path="pages/tabs/home"data-miniprogram-nickname="精品店"data-miniprogram-type="svg-404"clas......
  • vite+vue3使用transition
    一番操作发现切换路由竟然没效果,控制台打印了警告原因是确实根节点,按照如下方式解决,可以愉快的进行路由切换了......
  • vue2实现tabs侧边导航栏点击内容跳转到对应位置,且内容滚动导航栏切换对应tab
    vue2实现tabs侧边导航栏点击内容跳转到对应位置,且内容滚动导航栏切换对应tab1、tabs使用了element的插件tabs,省的自己写滑动动画2、左侧有用到了 element的插件NavM......
  • Android-Intent界面跳转
    1、问题描述在登陆界面中点击一个button时,触发后台检验用户名密码的正确性,如果符合数据库那么就登陆成功,本文简单介绍该结构,不设计数据库等调用,仅为两个验证字符串。2、结果......
  • 2023-01-04 云开发跳转小程序报错Permission denied
    问题描述:静态网页跳转小程序,报错Permissiondenied,还显示systemerror。原因:权限不足。解决方案:第一步,打开云开发控制台,找到设置==》权限设置,在【未登录用户访问云资源......
  • vue3使用clipboard
    <divclass="content-link"><spanid="link"class="content-link-urlellipsis">{{userInfo?.user.referralUrl}}</span><CopyIcon@click="copyUrl"class="......
  • Vue3+TS+Vite2+ElementPlus+Eslint项目实践遇到的技巧/问题汇总
    技巧/问题汇总Volar插件推荐一款VSCode插件,Volar是一款针对Vue的打造的官方插件,在第四届VueConf中尤雨溪大大专门做了推荐。用VSCode的铁汁们就有福了,虽然......