vue router.addRoutes简单应用及个人理解

以下内容仅为测试内容，自行修改

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import A from '../components/a'
import B from '../components/b'
import D from '../components/d'
import vnode from '../components/vnode'
import Danlie from '../components/danlie'
import Danlie2 from '../components/danlie2'

Vue.use(Router)

export const oldRouter = [//不需要权限的路由
  {
    path: '/',
    name: 'd',
    component: D,
    hidden: true
  }, {
    path: '/Danlie2',
    name: 'Danlie2',
    component: Danlie2,
    hidden: true
  }
]

export const superAdmin = [//需要权限的路由
  {
    path: '/A',
    name: 'A',
    component: A,
    hidden: true
  },
  {
    path: '/B',
    name: 'B',
    component: B,
    hidden: true
  },
  {
    path: '/vnode',
    name: 'vnode',
    component: vnode,
    hidden: true
  },
  {
    path: '/Danlie',
    name: 'Danlie',
    component: Danlie,
    hidden: true
  }
]

export default new Router({
  routes: oldRouter//默认使用不需要权限的
})

d.vue

<template>
    <div>
        <div @click="addrouters">动态添加路由</div>
    </div>
</template>
<script>
import router from '../router'//引入router
import {superAdmin} from '../router'//结构出需要新增的路由
export default {
    data(){
        return{
            end: null
        }
    },
    methods: {
        addrouters(){
            router.addRoutes(superAdmin)//动态添加路由
        }
    },
}
</script>

• 检验方法：进入 http://localhost:8080/#/ 在后面加一个A 也就是 http://localhost:8080/#/A 先看能不能显示内容（答案肯定是不能的），然后点击动态添加路由，再次尝试，就可以正常显示了!
• 个人理解：router.addRoutes()这个方法可以用来做权限管理，只不过这里是做的简单应用，还没配置router里面具体的权限，以及循环匹配权限所对应的路由，只是做了一个demo，但是网上好多教程都太详细了，实在看不懂，连初步应用都是懵逼的，所以有了这篇文章，在权限的道路上还任重道远，加油！

转载于:https://www.cnblogs.com/yzyh/p/10341130.html