vue-cli3 使用 addRoutes 动态添加路由不成功。

问题描述:最新使用vue-cli3搭建项目,几乎是从零开始,要根据登录返回的菜单信息动态添加到项目的路由,但是一直不成功

之前老项目使用是好使的,现在我新项目按照之前的方法就是不成功,也不知道怎么回事

main.js

import Vue from 'vue'
import router from '@/router'
import App from './App.vue'
import "@/assets/styles/index.css"
import "@/assets/font/iconfont.css"

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

router.js

import Vue from 'vue'
import Router from 'vue-router'
import login from '@/views/login'

Vue.use(Router)

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

addroutes

checkJs (mks) {
  let menu = mkTree(mks)
  setLocalStorage('mks', JSON.stringify(mks))
  setLocalStorage('menu', JSON.stringify(menu))
  let addRoutes = [{
    path: '/home',
    component: require('./home.vue'),
    isMenu: true,
    children: menu
  }]
  this.$router.addRoutes(addRoutes)
  this.$router.push({path: '/home'})
}



我感觉是component: require('./home.vue'),这一行代码问题,因为home文件是没有渲染进去的,期待了解的伙伴帮忙解答一下

阅读 8.4k
2 个回答
checkJs (mks) {
  let menu = mkTree(mks)
  setLocalStorage('mks', JSON.stringify(mks))
  setLocalStorage('menu', JSON.stringify(menu))
  let addRoutes = [{
    path: '/home',
    component: () => import('./home.vue'),
    isMenu: true,
    children: menu
  }]
  this.$router.addRoutes(addRoutes)
  this.$router.push({path: '/home'})
}
const router = new Router({
  routes: [
    {
      path: '/',
      name: '首页',
      component: () => import('@/views/Template.vue'),
      redirect: '/index',
      meta: {auth: true}
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('@/views/Login.vue'),
      meta: {auth: false}
    }
  ]
})
router.beforeEach((to, from, next) => {
  next()
})
router.afterEach((to, from, next) => {
  let routerArr = [{
    name: 'modules',
    path: '/modules',
    component: () => import('@/views/index.vue'),
    children: []
  }]
  router.addRoutes(routerArr)
  router.push({path: '/login'})
})
export default router

求问我这种路由为啥添加,打印还是没有添加进去?

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题