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

Question

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

这是我在 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

登录后，我想在后端作为 ajax 请求检查它，如果 Angular 色是用户使用(routes-user.js)，否则是主持人使用(routes-mod.js)，否则(routes.js)。

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

感谢您的帮助......

Answer 1

我测试了类似于您在 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 文件中获取它并使用模板字符串功能有条件地更改组件路径。

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