LAFINSIR 2022-01-14 19:36 采纳率: 71.4%
浏览 174
已结题

vue3 根据不同的用户,路由显示不同的文件

我想要根据不同的客户加载不同的路由文件
比如登录页面,客户A加载LoginA.vue,客户B加载LoginB.vue

我最开始的构想是在main.js中调用后台方法,获取到当前的client名字,并且存在localStorage中,然后在router文件夹下的index.js去获取localStorage的client名字,根据名字来加载对应的LoginA.vue还是LoginB.vue

结果我惊奇的发现,在index里面的console.log会比main.js执行的要快,所以顺序是有问题的(不知道这是为什么,不是main.js是最早执行的吗,console为什么又反了)

于是我试着把方法直接写在router/index.js里面,然后发现好像这样也不行

//index.js

import {createRouter, createWebHashHistory, createWebHistory, RouteRecordRaw} from 'vue-router';
import Login from '../views/Login.vue';
import Index from '../views/Index.vue';
import axios from "@/api/http";

let client = null;


// 获取当前的用户
async function getClient() {
    await axios.request({
        method: 'GET',
        url: '/cms/config',
    }).then(res => {
        client = res.data.Client;
        console.log("==== 11111111=====", client)
    }).catch(err => {
        console.log(err);
    })
}
getClient();
const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        redirect: '/login'
    },
    {
        path: '/login',
        name: 'Login',
       ** component: () => {
            console.log("==== client222222=====", client)
            if (client == 'companyA') {
                return import('../views/companyA/Login.vue')
            } else {
                return import('../views/Login.vue')
            }
        },**
    },
    {
        path: '/registration',
        name: 'Registration',
        component: () => {
            if (client == 'companyA') {
                return import('../views/companyA/Registration.vue')
            } else {
                return import('../views/Registration.vue')
            }
        },
        // component: () => import ('../views/Registration.vue')
    },
    {
        path: '/mec',
        name: 'Mec',
        component: () => import ('../views/mec.vue')
    },
    {
        path: '/test',
        name: 'Test',
        component: () => import('../views/test.vue'),
    },
    {
        path: '/index',
        name: 'Index',
        component: Index,
        redirect: '/home',
        children: [
            // {
            //   path: 'home',
            //   name: 'Home',
            //   component: () => import('../views/mainPage/navHome.vue')
            // },
            {
                path: '/home',//子组件的路径前加'/'则默认为根路由,url上就不显示父组件的path,即/home。如果不加'/',则会显示父组件的path,如/index/home
                name: 'Home',
                meta: {
                    keepAlive: true,
                },
                component: () => {
                    return import('../views/mainPage/navHome.vue')
                    // if(false){
                    //   return import('../views/mainPage/hpe/navHome.vue')
                    // }else{
                    //   return import('../views/mainPage/navHome.vue')
                    // }
                },
            },
            {
                path: '/allContents',
                name: 'AllContents',
                component: () => import('../views/mainPage/navAllContents.vue')
            },
            {
                path: '/tracks',
                name: 'Tracks',
                component: () => import('../views/mainPage/navTracks.vue')
            },
            {
                path: '/content',
                name: 'Content',
                component: () => import('../views/mainPage/navContent.vue')
            },
            {
                path: '/contributors',
                name: 'Contributors',
                component: () => import('../views/mainPage/navContributors.vue')
            },
            {
                path: '/presentation',
                name: 'Presentation',
                component: () => import('../views/mainPage/navPresentation.vue')
            },
            {
                path: '/notification',
                name: 'Notification',
                component: () => import('../views/mainPage/navNotification.vue')
            },
            {
                path: '/favorites',
                name: 'Favorites',
                meta: {
                    keepAlive: true,
                },
                component: () => import('../views/mainPage/navFavorites.vue')
            },
            {
                path: '/agenda',
                name: 'Agenda',
                meta: {
                    keepAlive: true,
                },
                component: () => import('../views/mainPage/Agenda.vue')
            },
            {
                path: '/searchAgenda',
                name: 'searchAgenda',
                meta: {
                    keepAlive: true,
                },
                component: () => import('../views/mainPage/searchAgenda.vue')
            },
            {
                path: '/keynotes',
                name: 'KeyNotes',
                meta: {
                    keepAlive: true,
                },
                component: () => import('../views/mainPage/navKeyNotes.vue')
            },
        ]
    }
];
const router = createRouter({
    history: createWebHashHistory(),
    // history: createWebHistory(process.env.BASE_URL),
    // history: createWebHistory(),
    routes
});

export default router;



执行的顺序还是有问题,在component里面打印的client是null,

有没有遇到过类似问题的朋友们知道该怎么处理这种情况呀

  • 写回答

2条回答 默认 最新

  • CSDN专家-showbo 2022-01-14 21:28
    关注

    axios.request是异步执行的,定义routes的时候ajax并没有返回设置client的值,所以为null。改下面试试,component改为异步函数

        async function getClient() {
            await axios.request({
                method: 'GET',
                url: '/cms/config',
            }).then(res => {
                client = res.data.Client;
                console.log("==== 11111111=====", client)
            }).catch(err => {
                console.log(err);
            })
        }
    
        //getClient();///这个不需要了,不会拦截下面代码执行
        const routes: Array<RouteRecordRaw> = [
            {
                path: '/',
                redirect: '/login'
            },
            {
                path: '/login',
                name: 'Login',
                component: async () => {
                    if (client == null) await getClient();////////////////
                    console.log("==== client222222=====", client)
                    if (client == 'companyA') {
                        return import('../views/companyA/Login.vue')
                    } else {
                        return import('../views/Login.vue')
                    }
                },
            },
            {
                path: '/registration',
                name: 'Registration',
                component: async () => {
                    if (client == null) await getClient();////////////////
                    if (client == 'companyA') {
                        return import('../views/companyA/Registration.vue')
                    } else {
                        return import('../views/Registration.vue')
                    }
                },
                // component: () => import ('../views/Registration.vue')//
            },
    
    
    

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
  • 归来巨星 前端领域新星创作者 2022-01-15 10:29
    关注

    不推荐你这样去操作,还是推荐你去定义两个路由,从路由守卫里面去调用 重定向,这样的话会方便、也比较符合逻辑。

    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 1月25日
  • 已采纳回答 1月17日
  • 修改了问题 1月14日
  • 修改了问题 1月14日
  • 展开全部

悬赏问题

  • ¥15 我用C语言easyx图形库绘制了一个3d游戏方框透视,但进入游戏时候鼠标准星对准方框边缘 鼠标光标就会弹出来这是啥情况怎样让光标对准绘制的方框点击鼠标不弹出光标好烦这样
  • ¥20 用Power Query整合的问题
  • ¥20 基于python进行多背包问题的多值编码
  • ¥15 相同型号电脑与配置,发现主板有一台貌似缺少了好多元器件似的,会影响稳定性和使用寿命吗?
  • ¥15 要求编写稀疏矩阵A的转置矩阵的算法
  • ¥15 编写满足以下要求的停车场管理程序,设停车场只有一个可停放n辆车的狭窄通道且只有一个大门可供车辆进出。
  • ¥15 C语言:数据子序列基础版
  • ¥20 powerbulider 导入excel文件,显示不完整
  • ¥15 用keil调试程序保证结果进行led相关闪烁
  • ¥15 paddle训练自己的数据loss降不下去