精华内容
下载资源
问答
  • addroutes
    千次阅读
    2021-08-31 10:56:47
    // 动态生成路由
    router.addRoutes([路由配置对象])
    或者 
    this.$router.addRoutes([路由配置对象])
    

    示例, 点击按钮,跳转abc页面

    <button @click="hAddRoute"> addRoutes </button>
    
    hAddRoute(){
       this.$router.addRoutes([{
         path:'/abc',
         component:()=>import('@/views/abc')
       }])
    }
    
    更多相关内容
  • 主要介绍了vue addRoutes路由动态加载操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 最近项目中使用了vue-router的addRoutes这个api,遇到了一个小坑,记录总结一下。 场景复现: 做前端开发的同学,大多都遇到过这种需求:页面菜单根据用户权限动态生成,一个常见的解决方案是: 前端初始化的时候,...
  • 在我不知道vue的路由还可以通过addRoutes动态添加时,我只知道vue的路由都是写死在路由表中的,每当跳转时再去加载相应的路由。直到在一个新公司接到需要根据用户的权限显示不同的菜单的需求时才知道了原来vue-...
  • 某些场景下我们需要利用addRoutes动态添加路由,但是刷新后就会失效,前段时间项目里刚好遇到了这个应用场景,所以就花时间研究了一下,做下分享跟记录,说的不对的地方,请大家指正。 应用场景:用户a登录进系统,...
  • 接下来各种百之谷之,发现vue-router在2.0版本中提供了addRoutes方法添加路由,希望的曙光出现。 经过一番折腾终于实现了功能,记录下来便于回顾,也希望能帮助到同样有需求的同志。 思路 1、首先在
  • 主要介绍了使用VueRouter的addRoutes方法实现动态添加用户的权限路由,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 实现上倒没什么问题,不过这种做法需要在登录和首页之间通过url跳转,感觉总是不太”优雅”,实际上只要能在登录后动态修改当前实例的路由就行了,之前确实没办法,但vue-router 2.2版本新增了一个router.addRoutes...
  • 主要介绍了vue 解决addRoutes多次添加路由重复的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue-addRoutes

    2021-05-30 06:24:16
    项目结构mock:node.js搭建的模拟数据的小服务myProject:vue项目。登录权限设置,根据角色,动态添加路由#启动mock:进入mock目录...目前项目采用:页面路由meta上加参数权限id,在beforeEach上根据用户权限id集合判断。
  • 本篇文章主要介绍了vue-router+vuex addRoutes实现路由动态加载及菜单动态加载,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了解决vue addRoutes不生效问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • crmm 一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and...
  • //属性 } // console.log(router.item) router.addRoutes(arr); }) const routes=[ { path:'/', name:Main, component:Main, redirect:'/home', children:[] }, { path:'/login', name:'login', component:Login } ...
  • 浅析router.addRoutes

    2022-05-06 13:47:31
    浅析router.addRoutes 最近阅读vue-element-admin的权限验证源码时碰到了router.addRoutes这个方法不得其解,查阅官方文档得到的解释是: router.addRoutes 函数签名: router.addRoutes(routes: Array) 动态添加更...

    浅析router.addRoutes

    最近阅读vue-element-admin的权限验证源码时碰到了router.addRoutes这个方法不得其解,查阅官方文档得到的解释是:

    router.addRoutes
    函数签名:
    router.addRoutes(routes: Array)
    动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。


    但什么是更多动态规则?符合routes选项的要求的数组又长什么样?
    下面用代码来解释

    Part1 基本使用:

    现在我们有一个非常普通的路由,

    const routes = [
      {
        path: '/',
        name: 'Home',
        component: Home
      },
    {
      path: '/pageA',
      name: 'pageA',
      component: pageA,
    }
    ]
    const router = new VueRouter({
      routes
    })
    export default router
    

    那么使用router.addRoutes改造上面的配置,实现动态添加pageA,如下:

    const router = new VueRouter({
      {
        path: '/',
        name: 'Home',
        component: Home
      },}),
    let route=[
    {
      path: '/pageA',
      name: 'pageA',
      component: pageA,
    }]
    router.addRoutes(route);
    export default router
    

    小结:把原来的routes配置照搬到一个新的数组中,就可以作为addRoutes的参数使用,经验证,通过addRoutes动态配置的方式和普通配置无差异。

    你可能会问,这有什么用?那么接下来,我们来谈谈它的应用:

    Part 2 路由的权限验证:

    如果你的网页有[普通用户,管理员…]等多种角色类型,不同的角色能看到的页面应该是不同的,比如普通用户不应该看到管理员的控制台,那么这个时候,动态路由就非常有用了
    可以这么做

    let pageA,pageB,pageC;
    let route=[
    {
      path: '/pageA',
      name: 'pageA',
      component: pageA,
    },
    {
      path: '/pageB',
      name: 'pageB',
      component: pageB,
    },
    {
      path: '/pageC',
      name: 'pageC',
      component: pageC,
    }
    ]
    let commonUser=['pageA','pageB']
    let commonUserRoute=route.filter(function(page){
        return commonUser.includes(page.name)
    })
    console.log(commonUserRoute);
    router.addRoutes(commonUserRoute);
    //结果
    // (2) [{…}, {…}]
    // 0: {path: "/pageA", name: "pageA", component: pageA}
    // 1: {path: "/pageB", name: "pageB", component: pageB}
    // length: 2
    // __proto__: Array(0)
    

    这样便能完成权限验证,当然如果权限验证都在前台完成,会有一定的安全隐患,最好的还是在后台来进行限制访问。

    展开全文
  • Vue动态路由addRoutes

    2021-07-28 11:03:36
    const accessRoutes = filterAsyncRoutes(routes,[roles]) // 动态添加路由到router内 router.matcher.addRoutes(accessRoutes) store.commit('saveRoute',accessRoutes) next({ ...to, replace: true }) } catch ...

    动态路由设置一般有两种:

    (1)、简单的角色路由设置:比如只涉及到管理员和普通用户的权限。通常直接在前端进行简单的角色权限设置

    (2)、复杂的路由权限设置:比如OA系统、多种角色的权限配置。通常需要后端返回路由列表,前端渲染使用

    1、简单的角色路由设置

    (1)配置项目路由权限

    // router.js
    
    import Vue from 'vue'
    import Router from 'vue-router'
    import Layout from '@/layout'
    Vue.use(Router)
    // 权限路由列表
    let asyncRoutes = [
        {
            path: '/',
            component: Layout,
            redirect: () => import('@/views/index'),
            redirect: '/home',
            meta: {
               roles:[1,2,3] //三种角色
            },
            children: [
                {
    		        path: 'home',
    		        component: () => import('@/views/home'),
    		        meta: {
    		          title: 'tIndex',
    		          roles:[1,2,3]
    		        }
    		      },
               {
            path: 'member',
            component: () => import('@/components/animate'),
            meta: {
              title:'tMember',
              roles:[1,2]
            },
            children:[
              {
                path:'',
                component: () => import('@/views/member'),
                name:'member',
                meta:{
                  roles:[1,2]
                },
              },
              {
                path:'detail',
                component: () => import('@/views/member/detail'),
                name:'memberDetail',
                meta:{
                  title:'tMemberDetail',
                  roles:[1,2]
                }
              },
              {
                path:':scoreId/score',
                component: () => import('@/views/member/score'),
                name:'score',
                meta:{
                  title:'tScore',
                  roles:[1,2]
                }
              }
            ]
          },
            ]
        },
     
    ]
    // 静态路由
    let defaultRouter = [{
      path: '/404',
      name: '404',
      component: () => import('@/views/404/index'),
       meta: {
          title: '404'
      }
    },{
      path: '/login',
      name: 'login',
      component: () => import('@/views/login'),
      meta: {
        title:'tLogin'
      },
    }]
    export const router = new VueRouter({
      mode: 'history',
      base: process.env.BASE_URL,
      routes: defaultRouter
    })
    

    2)新建一个公共的asyncRouter.js文件

    function hasPermission(roles, route) {
        if (route.meta && route.meta.roles) {
          return roles.some(role => route.meta.roles.includes(role))
        } else {
          return false
        }
      }
      // 递归过滤异步路由表,筛选角色权限路由
      export function filterAsyncRoutes(routes, roles) {
        
        const res = [];
        routes.forEach(route => {
          const tmp = { ...route }
          if (hasPermission(roles, tmp)) {
            if (tmp.children) {
              tmp.children = filterAsyncRoutes(tmp.children, roles)
            }
            res.push(tmp)
          }
        })
      
        return res
      }
    

    (3)创建路由守卫 在main.js当中

    // import NProgress from 'nprogress' // 进度条插件
    // import 'nprogress/nprogress.css' // 进度条样式
    import store from './store'
    import storage from '@/utils/storage.js'
    import { router, routes } from './router'
    import { filterAsyncRoutes } from './router/asyncRouter.js'
    const whiteList = ['/login']
    router.beforeEach(async(to, from, next) => {
    	(to.matched[to.matched.length - 1]?.path === to.matched[to.matched.length - 2]?.path + '/') && to.query ? to.matched[to.matched.length - 2].meta.query = to.query : 0
    	// 进度条开始
        // NProgress.start()
         // 获取路由 meta 中的title,并设置给页面标题
        // document.title = to.meta.title
        // 获取用户登录的token
        const hasToken = storage.getLocal('userinfo') && storage.getLocal('userinfo').token
        // 判断当前用户是否登录
        if (hasToken) {
            if (to.path === '/login') {
                next({ path: '/' })
                // NProgress.done()
            } else {
                // 从store中获取用户角色
                const hasRoles = store.state.routes && store.state.routes.length > 0  
                if (hasRoles) {
                    next()
                } else {
                    try {
                        // 获取用户角色
                        const roles = await store.state.adminUser.auth
                        // 通过用户角色,获取到角色路由表
                        const accessRoutes = filterAsyncRoutes(routes,[roles])
                        // 动态添加路由到router内
                        
                        router.matcher.addRoutes(accessRoutes)
                        store.commit('saveRoute',accessRoutes)
                        next({ ...to, replace: true })
                    } catch (error) {
                        // 清除用户登录信息后,回跳到登录页去
                        storage.removeLocal('userinfo')
                        storage.removeLocal('token')
                        store.state.routes = null
                        next(`/login?redirect=${to.path}`)
                        // NProgress.done()
                    }
                }
            }
        } else {
            // 用户未登录
            if (whiteList.indexOf(to.path) !== -1) {
                // 需要跳转的路由是否是whiteList中的路由,若是,则直接条状
                next()
            } else {
                // 需要跳转的路由不是whiteList中的路由,直接跳转到登录页
                next(`/login?redirect=${to.path}`)
                // 结束精度条
                // NProgress.done()
            }
        }
    })
    // router.afterEach(() => {
    //     // 结束精度条
    //     NProgress.done()
    // })
    

    (4)在login登录的时候将roles存储到store中

    import storage from '@/utils/storage.js'
    const mutations = {
      saveUserInfo (state, data) {
        storage.setLocal('token',data.token)
        storage.setLocal('userinfo', data)
        state.adminUser = data
      },
      saveRoute (state, data) {
        state.routes = data
      },
    }
    export default mutations
    
    

    login.vue

    import { mapMutations } from "vuex";
    export default {
      name: "login",
      data() {
        return {
          ruleForm: {
            username: "",
            password: "",
          },
          rules: {
            username: [
              {
                required: true,
                message: '输入帐号',
                trigger: "blur",
              },
              { min: 3, message: this.$t('min3'), trigger: "blur" },
            ],
            password: [
              {
                required: true,
                message: '输入密码',
                trigger: "blur",
              },
              { min: 6, message: this.$t('min6'), trigger: "blur" },
            ],
          },
        };
      },
      
      methods: {
        ...mapMutations(["saveUserInfo"]),
        async submitAdmin(formName) {
          await this.$refs[formName].validate();
          this.loginHandle(this.ruleForm);
        },
        async loginHandle(ruleForm) {
          let res = await login(ruleForm);
            if (res.code) return;
            this.saveUserInfo(res);
            this.$router.push("/");
            this.$message.success({
              message: this.$t('loginSuccess'),
            });
        },
      },
    };
    

    2、复杂的路由权限设置(后端动态返回路由数据)

    https://www.jianshu.com/p/4f2566b67989

    展开全文
  • VUE-router.addRoutes根据后台接口传递数据生成动态路由,前端拿到配置并生成侧边栏-实现页面级权限控制。 ----------------------------------------------- 登陆成功之后直接由后端返回异步路由表,然后前端直接...
  • 通过addroutes动态添加路由

    千次阅读 2022-03-13 16:36:33
    说明:addroutes是用来动态添加路由的,在做权限管理的时候会用到这个api,接下来我们一起来探究一下这个api吧。 一.通过脚手架生成的页面3 1.index.js import Vue from 'vue' import VueRouter from 'vue-router...

    说明:addroutes是用来动态添加路由的,在做权限管理的时候会用到这个api,接下来我们一起来探究一下这个api吧。

    一.addroutes的使用

    1.router/index.js

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Home from '../views/Home.vue'
    
    Vue.use(VueRouter)
    
    const routes = [
      {
        path: '/',
        name: 'Home',
        component: Home
      },
      {
        path: '/about',
        name: 'About',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () =>
          import(/* webpackChunkName: "about" */ '../views/About.vue')
      }
    ]
    
    export const asyncroutes = [
      {
        path: '/jiagou',
        name: 'jiagou',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () =>
          import(/* webpackChunkName: "about" */ '../views/jiagou.vue')
      }
    ]
    
    const router = new VueRouter({
      mode: 'history',
      base: process.env.BASE_URL,
      routes
    })
    
    export default router
    
    

    2.store/index.js

    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      state: {
        isLogin: false
      },
      mutations: {
        login (state) {
          state.isLogin = true
        }
      },
      actions: {},
      modules: {}
    })
    

    3.home.vue

    <template>
      <div class="">
        <button @click="fn">登录页</button>
        <router-view />
      </div>
    </template>
    
    <script>
    import { asyncroutes } from '../router/index'
    export default {
      name: '',
      methods: {
        fn () {
          // console.log(this.$router)
          // this.$router.addRoutes(asyncroutes)
          this.$store.commit('login')
          console.log(this.$router)
          this.$router.addRoutes(asyncroutes)
        }
      }
    }
    </script>
    
    <style scoped></style>
    

    4.App.vue

    <template>
      <div id="app">
        <div id="nav">
          <router-link to="/">登录</router-link> |
          <router-link to="/about">首页</router-link>
          <div v-if="$store.state.isLogin">
            <router-link to="/jiagou">架构</router-link>
          </div>
        </div>
        <router-view />
      </div>
    </template>
    
    <style lang="less">
    #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
    }
    
    #nav {
      padding: 30px;
      display: flex;
      justify-content: center;
    
      a {
        font-weight: bold;
        color: #2c3e50;
    
        &.router-link-exact-active {
          color: #42b983;
        }
      }
    }
    </style>
    

    目前展示的页面:

     当前只能访问到这两个路由的界面,接下来,我们通过addroutes这个api来添加一个可以访问的页面。

    点击登录页时

    可以看出多了一个跳转的页面,这个页面就是通过addroutes这个api动态添加的。 

    展开全文
  • 从后台读取角色menus对象,采用addRoutes方式增加路由,登出后换用户登录继续addRoutes路由如果存在重复的会报vue-router.common.js?1ecf:18 [vue-router] Duplicate named routes definition: { name: "top-menu", ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,944
精华内容 1,577
关键字:

addroutes

友情链接: BC 2 32.rar