zoukankan      html  css  js  c++  java
  • 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,但是网上好多教程都太详细了,实在看不懂,连初步应用都是懵逼的,所以有了这篇文章,在权限的道路上还任重道远,加油!
  • 相关阅读:
    移动端页面使用rem布局
    Vue2.0 render:h => h(App)
    sublime3 快捷键大全
    node-webkit学习之【无边框窗口用JS实现拖动改变大小等】
    mock.js-无需等待,随机产生数据,让前端独立于后端进行开发
    Sublime Text 3 遇到的一些小坑的解决方法
    Angular Cli 升级到最新版本
    Angular 表单嵌套、动态表单
    angular6 iframe应用
    JS 时间格式 相互转化
  • 原文地址:https://www.cnblogs.com/yzyh/p/10341130.html
Copyright © 2011-2022 走看看