I am trying to control vue permissions, but I have encountered some problems in adding routes dynamically. The code is as follows:
this is the main.js file
// 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: "-sharpapp",
router,
components: { App },
template: "<App/>"
})
this is the routing file
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:-sharpde5b5b;color:-sharpfff; font-size:30px;line-height:100px;text-align:center;">red</div>" }
const yellow = { template: "<div style="background-color:-sharpdee066;color:-sharpfff; font-size:30px;line-height:100px;text-align:center;">yellow</div>" }
const blue = { template: "<div style="background-color:-sharp6680e0;color:-sharpfff; 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
}
]
}
]now the situation is to add dynamically, there is no response, and there is nothing wrong to ask for advice