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

登录后，如果角色是user use（routes user.js）elseif是moditor use（routes mod.js）else（routes.js），我想在后端将其作为ajax请求进行检查

我不想在客户端中显示/user/moditor/editor，但我想在登录后进行检查，并在根url/中显示每个角色组件。 谢谢你的帮助

---

感谢您的帮助……

您可以向路由中添加元数据以解决问题，并在输入路由之前检查元数据：

    { 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, meta: {authorize: ["Admin"]} },

然后将以下方法添加到路由器：

router.beforeEach((to, from, next) => {
  const { authorize } = to.meta
  // get currently logged in user (in my case it's coming from vuex)
  const currentUser = store.getters['authentication/user']

  if (!currentUser && to.path !== '/login') {
    // not logged in so redirect to login page with the return url
    return next({ path: '/login', query: { returnUrl: to.path } })
  }

  if (authorize) {
    // check if route is restricted by role
    if (authorize.length && !authorize.some(r => currentUser.roles.includes(r))) {
      // role not authorised so redirect to home page
      return next({ path: '/' })
    }
  }

  next()
})

---

我在Vuex中测试了一些类似于您对正常组件传递和延迟加载组件的要求的东西，这很有效。下面是我的代码，我想做的是使用一个变量“unauthorized”，并根据该变量使用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文件中获取该变量，并使用模板字符串功能有条件地更改组件路径

如果你需要更多的帮助，一定要告诉我