vue 动态添加路由

Question

本人在尝试vue权限控制，但是在动态添加路由方面遇到一些问题，代码如下：
这是main.js文件

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import { powerRouter } from './router';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Vue.config.productionTip = false
router.beforeEach( (to,from,next)=>{
  let newrouter;
  newrouter = powerRouter;
 
  router.addRoutes(newrouter)
  console.log(newrouter)
  console.log(router)
  next()

} )

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

---

---

这是路由文件

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Index from '@/components/index'
import Login from '@/components/login'
Vue.use(Router)
const red = { template: '<div style="background-color:#de5b5b;color:#fff; font-size:30px;line-height:100px;text-align:center;">red页面</div>' }
const yellow = { template: '<div style="background-color:#dee066;color:#fff; font-size:30px;line-height:100px;text-align:center;">yellow页面</div>' }
const blue = { template: '<div style="background-color:#6680e0;color:#fff; font-size:30px;line-height:100px;text-align:center;">blue页面</div>' }

export default new Router({
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    }
  ]
})


export const powerRouter = [
  {
    path:'/',
    redirect:'/red',
    name:'Index',
    component:Index,
    children:[
      {
        path:'/red',
        name:'red',
        component:red
      }
    ]
  }
]

现在情况是动态添加没反应 也没报什么错 求指点

Answer 1

个人感觉完全没必要像你这么做，你完全可以给路由携带参数就好了，然后模板里面根据传入的参数对页面进行不同的调整，详见https://router.vuejs.org/zh-c...

而且你这所谓的动态添加路由也只不过是事先写好了模板，然后需要的时候去调取而已