时间戳

首页 > 解决方案 > 如何动态更改VueRouter源文件？

javascript - 如何动态更改VueRouter源文件？

问题描述

您好，我有一个项目，它包含多个角色（VueJs+Laravel），我使用 laravel 作为后端，使用 vuejs 作为前端，我有三个不同的角色（用户、主持人、编辑）。

这是我在 app.js 中的代码

// VueRouter
import VueRouter from 'vue-router';
import routes from './routes.js';
Vue.use(VueRouter);

var router = new VueRouter({
    mode: 'history',
    routes
})

这是我的路线文件：

let routes = [

    // General 
    { path: '/about', component: require('./components/Home/About.vue').default },
    { path: '/pasword-change',  component: require('./components/ChangePassword.vue').default },

    // User
    { path: '/User', component: require('./components/User/Dashboard.vue').default },


    // Modirator
    { path: '/Modirator', component: require('./components/Modirator/Dashboard.vue').default },

    // Editor
    { path: '/Editor', component: require('./components/Editor/Dashboard.vue').default },


    // Error
    { path: '*', component: require('./components/Errors/404.vue').default} },

]
export default routes

登录后，如果角色是用户使用（routes-user.js），我想在后端将其作为ajax请求检查，否则如果是主持人使用（routes-mod.js），否则（routes.js）。

我不想在客户端显示/user /modirator /editor，但我想在登录后检查，并且每个都在 root url /中显示角色组件。感谢帮助。

感谢帮助....

标签： javascriptlaravelvue.jsvuejs2vue-router

解决方案

我在 Vuex 中测试了类似于您对正常组件传递和延迟加载组件的要求的东西，这很有效。下面是我的代码，我想要做的是有一个变量“未授权”，并基于它使用 javascript 三元运算符或 javascript 模板字符串加载不同的组件。

import Vue from 'vue'
import Router from 'vue-router'
import Auth from './views/Auth.vue'
import Board from './views/Board.vue'

Vue.use(Router)

let unauthorized = true;

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/auth',
      name: 'authenticate',
      component: unauthorized ? Auth : Board
    },
    {
      path: '/',
      name: 'home',
      component: () => import(`./views/${unauthorized ? 'Auth.vue': 'Board.vue'}`)
    }
  ]
})

具体解决方案

根据您的要求，您可以根据您是否以“主持人”或“用户”或“编辑”身份登录，将变量（“访问类型”）存储在本地存储中，然后在 router.js 文件中获取它并使用模板字符串功能有条件地更改组件路径。

如果您需要更多帮助，请告诉我。

推荐阅读