精华内容
参与话题
问答
  • vue-router如何进行路由动态添加

    万次阅读 2018-07-27 19:11:39
    需要在进行页面切换的地方添加* *进行页面的切换。 1.页面路由跳转 //页面中使用下面语句代替a标签实现跳转,在写完标签后还需要在router中写下以下语句 <router-link to="/foo...

    安装

    npm install vue-router --save

    使用

    需要在进行页面切换的地方添加** **进行页面的切换。

    1.页面路由跳转

    //页面中使用下面语句代替a标签实现跳转,在写完标签后还需要在router中写下以下语句
     <router-link to="/foo">Go to Foo</router-link>
    const router = new VueRouter({
     { path: '/foo', component: Foo }//路由,component后面是文件地址,有几种方式
    })
    //component:方式
    1. import user  from "../user.vue";
    comonent : user
    将组件用require引进来
    2. component: resolve => require(['../template/list.vue'], resolve)//import将页面引入
    3.   component: () => import('@/views/redirect/index')
    

    2.编程式路由跳转

    使用js进行路由跳转

    router.push(location, onComplete?, onAbort?)
    this.$router.push
    

    动态路由

    动态注册路由(动态在new router中注册路由)

    动态向router数组中添加路由。

     let comment = [{path: '../../view/index/index.vue'}];
    this.$router.options.routes[1].push({
     path: '/' + __menu.name,
    name: __menu.name,
     name: __menu.name,
     component: resolve => require([comment[0].path], resolve)
     })
     this.$router.addRoutes(vm.$router.options.routes);//调用addRoutes添加路由
    
    • 总结
      通过this.$router.options.router[1]可以找到自己定义的router,然后按照规则进行添加就可以,最后不要忘记使用**addRoutes()**将相关的路由进行添加,这样才可以正确的天机路由,尤其是不要将方法名写错。
      ###路由嵌套
      使用children进行路由的嵌套,相当于父子路由的嵌套。
    const router = new VueRouter({
            routes: [
                {
                    name: 'login',
                    path: '/login',
                    component: login
                },
                {
                    name: 'main',
                    path: '/main',
                    redirect: '/icustomer',
                    component: main,
                    children: [
                        {
                            path: '/icustomer',
                            name: 'customer',
                            component: resolve => require(['../view/index/icustomer.vue'], resolve)
                        }
              ]} 
           ]
    })
    

    路由重定向

    就是将路由指向别的路由,例如跳转index页面但是你想跳转其他页就可以使用重定向,将路由订到别的位置。

      {
                    name: 'main',
                    path: '/main',
                    redirect: '/index',
                    component: main
    }//将main页面定向到index所指的页面,需要在下面声明index页面的路由,不然报错。
    

    总结

    对于其他要查看官方文档vue-router,一上只是我在使用过程中的一些想法有不对的地方希望可以指正,我们共同进步。

    展开全文
  • 添加动态路由

    2019-03-12 17:07:22
    先配置内网静态路由:route add192....注:它表示访问192.168.10.0网段的所有数据都要经过网关192.168.10.1,-p表示永久添加,重启后依然有效 再配置外网静态路由:route add0.0.0.0 mask0.0.0.0 192.168.20.1 -p ...

    先配置内网静态路由:route add 192.168.10.0 mask 255.255.255.0 192.168.10.1 -p
    注:它表示访问192.168.10.0网段的所有数据都要经过网关192.168.10.1,-p表示永久添加,重启后依然有效
    再配置外网静态路由:route add 0.0.0.0 mask 0.0.0.0 192.168.20.1 -p

    展开全文
  • vue中使用动态添加路由(router.addRoutes)加载权限侧边栏的两种方式 工作中我们经常会遇到这种需求,后台定义用户的权限数据,前端进行获取,并渲染在侧边栏导航上,不同权限的用户看到的侧边栏是不同的。即前端...

    vue中使用动态添加路由(router.addRoutes)加载权限侧边栏的两种方式

    工作中我们经常会遇到这种需求,后台定义用户的权限数据,前端进行获取,并渲染在侧边栏导航上,不同权限的用户看到的侧边栏是不同的。即前端渲染的数据是随着后台的改变而改变的,做到真正的前后端分离。

    一、拿到需要动态添加的路由表

    我们的思路是:

    登录(login,所有人均可见)--------->登录成功,获取权限-------->权限不同,侧边栏的数据展示不同

    先定义一份公共的路由表,里面仅有一些公共的路由,如 login

    获取到权限后,我们根据权限,得到需要动态添加的路由表,把这份路由表动态添加到router中即可。

    通过查阅网上的资料,论坛等我总结出了2条方式,分别是前端主导和后台主导。

    (1)前端主导

    何谓前端主导?就是在整个权限方面,主体是定义在前端。前端需要提前定义一份完整的路由权限表,后台的作用仅仅是返回当前用户的权限列表,把获取到的权限表比对完整的权限表,那么得到一份新的路由权限表拿去渲染。

    这里需要注意的是,为什么不直接把后台返回的权限列表拿去渲染,而是需要通过比对,才得出权限表?

    因为后台返回的仅仅只是字符串!

    我们在使用vue-router定义路由的时候,是需要导入该路由对应的component的,如下所示, component是必须引入的,而后台返回给我们的数据是不会带component对应的组件的。

    import Login from './views/Login.vue'
     
    let publicRoutes = [
      {
        path: '/login',
        name: 'login',
        component: Login
      }
    ]

    因此我们可以在前端通过提前定义一份全部的,完整的路由表,把后台传的数据当参考使用,从而得出一份路由权限表。

    举个例子:

    在前端定义的完整权限表:

    import Order from './components/orderCompontents/order.vue'
    import OrderList from './components/orderCompontents/orderList.vue'
    import ProductManage from './components/orderCompontents/productManage.vue'
    import ProductionList from './components/orderCompontents/productionList.vue'
    import ReviewManage from './components/orderCompontents/reviewManage.vue'
    import ReturnGoods from './components/orderCompontents/returnGoods.vue'
     
    const allroutes = [
      {
        path: '/order',
        title: 'order-manage',
        component: Order,
        meta: {
          name: '订单管理'
        },
        children: [
          {
            path: '/order-list',
            title: 'order-list',
            component: OrderList,
            meta: {
              name: '订单列表'
            }
          },
          {
            path: '/product',
            title: 'product-manage',
            component: ProductManage,
            meta: {
              name: '生产管理'
            },
            children: [
              {
                path: '/product-list',
                title: 'product-list',
                component: ProductionList,
                meta: {
                  name: '生产列表'
                }
              },
              {
                path: '/review-manage',
                title: 'review-manage',
                component: ReviewManage,
                meta: {
                  name: '审核管理'
                }
              }
            ]
          },
          {
            path: '/return-goods',
            title: 'return-goods',
            component: ReturnGoods,
            meta: {
              name: '退货管理'
            }
          }
        ]
      }
    ]

    后台传输过来的数据:

    {
        "code": 0,
        "message": "获取权限成功",
        "data": [
            {
                "name": "订单管理",
                "children": [
                    {
                        "name": "订单列表"
                    },
                    {
                        "name": "生产管理",
                        "children": [
                            {
                                "name": "生产列表"
                            }                     
                        ]
                    },
                    {
                        "name": "退货管理"
                    }
                ]
            }
        ]
    }

    我们对比这两个数据的name属性,就能很轻易的过滤出一份路由权限表。再通过router.addRoutes()动态添加进路由即可。

    (2)后台主导

    前面一种方式比较简单,前端定义好,后台传过来进行比对即可,但是缺点也是很明显。如果后台传递的权限名稍稍做一些改动,那么前端就匹配不到相应的路由了。也就是改一个权限名,前端后台需要一起改。。有点不太符合前后端彻底分离的思想。我们想要的是,只改后台,那么前端会根据接收的数据自动变化! 哈哈哈,怎么解决这个问题呢? 那就是用后台主导思想。

    思路如下:

    路由表不在前端进行比对,后台对用户的权限进行比对,返回给前端一个比对好的路由表,且返回的路由表需要有如下字段:

    {
      "data": {
        "router": [
          {
            "path": "",
            "redirect": "/home",
          },
          {
            "path": "/home",
            "component": "Home",
            "name": "Home",
            "meta": {
              "title": "首页",
              "icon": "example"
            },
            "children": [
              {
                "path": "/xitong",
                "name": "xitong",
                "component": "xitong/xitong",
                "meta": {
                  "title": "系统",
                  "icon": "table"
                }
              }
            ]
          },
          {
            "path": "*",
            "redirect": "/404",
            "hidden": true
          }
        ]
      }
    }

    注意其中的component字段,他是字符串,我们需要把这个字符串转化为我们前端定义的组件!

    function filterRouter(routers) { // 遍历后台传来的路由字符串,转换为组件对象
        const accessedRouters = routers.filter(route => {
            if (route.component) {
                if (route.component === 'Home') { // Home组件特殊处理
                    route.component = Home
                } else {
                    route.component = _import(route.component)
                }
            }
            if (route.children && route.children.length) {
                route.children = filterRouter(route.children)
            }
            return true
        })
        return accessedRouters
    }

    这个函数的主要作用就是把后台传过来的字符串型的component转化为真正的组件

    其中_import()函数的定义如下:

    function _import (file) {
        return () => import('@/components/views/' + file + '.vue')
    }

    通过异步加载组件,去请求该组件

    其中的路径需要大家根据自己文件的路径去修改。

    这种方法最重要的一点就是,后台传递的component实际存放的是路径!前端根据这个路径去找到这个组件并异步加载组件。

    最终执行结束后,filterRouter返回的就是一份路由权限列表,里面的component也有了引用。

    这种方法的好处在于,前端的所有权限路由数据都来自于后台,只要路径不改,后台任意修改数据,前端均会自动变化。

     

    二、渲染数据到侧边栏

    通过 (一) 的方式我们可以拿到一份要渲染的路由表,我是存到了vuex中,然后在sideBar页面中拿出来,渲染。

    展开全文
  • router动态添加路由

    千次阅读 2019-05-20 14:32:01
    当你进入系统,肯定先进入登陆页面,这时候路由其实已经创建好了,当你登陆的时候,肯定进入的是404页面,但是在router中可以动态添加路由 在main.js中添加如下代码 router.afterEach((to, form) => { let ...

    在写管理系统的时候,菜单都是动态添加进去的,但是路由都是在初始化的时候都创建好的
    当你进入系统,肯定先进入登陆页面,这时候路由其实已经创建好了,当你登陆的时候,肯定进入的是404页面,但是在router中可以动态的添加路由

    在main.js中添加如下代码

    router.afterEach((to, form) => {
      let unfound = [{
        path: '/404',
        name: 'login404',
        component: () => import('./components/common/404.vue')
      }, {
        path: '*',
        redirect: '/404',
        hidden: true
      }]
      router.addRoutes(unfound)
    })
    

    使用router.addRouter("")是添加路由的方法,注意路由的格式是数组

    展开全文
  • vue-router 动态添加 路由

    万次阅读 2017-11-21 20:57:50
    动态添加路由可以用了做权限管理。登录后服务器端返回权限菜单,前端动态添加路由 然后在设置菜单  1、vue-router 有方法router.addRoutes(routes) 动态添加更多的路由规则。参数必须是一个符合 routes 选项...
  • 的作者,一句话就点明了最近在做一个企业网站,头部是需要根据后台动态添加的,然后我们肯定是需要根据后台给我们的数据,动态生成头部导航(这个倒是很容易的),然后再动态添加路由,利用的方法是vm.$router....
  • 整个动态路由的设置是我自己研究写的,现在项目中没发现什么问题。如发现有问题,欢迎前来纠正,谢谢!!! 链接:https://pan.baidu.com/s/1J9R2TkqJk0H9JMjqp2WcFw 提取码:n4rk 复制这段内容后打开百度网盘手机...
  • Vue 动态添加路由及生成菜单

    千次阅读 2019-06-19 17:57:36
    更多文章 写后台管理系统,估计有不少人遇过这样的需求:根据后台数据动态添加路由和...利用 vue-router 的 addRoutes 方法可以动态添加路由。 先看一下官方介绍: router.addRoutes router.addRoutes(routes: Arr...
  • vue权限控制路由(vue-router 动态添加路由

    万次阅读 多人点赞 2018-09-13 15:13:36
    用户登录后返回权限菜单,前端根据权限菜单动态添加路由,然后再动态生成菜单栏。  思路如下:  一、定义初始化默认路由。 二、动态配置路由,这里是把所有组件中相应的路由配置成一个个的对象,根据后台返回...
  • 当我们动态添加路由之后 需要手动添加404重定向的路由 否则页面会一直404 如下 // get user info const { pagesIndex } = await store.dispatch('user/getUserInfo'); // 匹配路由 const accessRoutes = await store...
  • 在我不知道vue路由还可以通过addRoutes动态添加时,我只知道vue路由都是写死在路由表中的,每当跳转时再去加载相应的路由。直到在一个新公司接到需要根据用户的权限显示不同的菜单的需求时才知道了原来vue-...
  • vue动态添加路由,element-admin后台路由

    千次阅读 2019-07-18 18:05:38
    1.第一步,将后台数据转换成vue-router 需要的数据格式,以下是路由格式 declare type RouteConfig = { path: string; //路径 component?: Component;//对应模块 name?: string; // 命名路由 components?: ...
  • Vue 动态添加路由实现

    2020-06-13 18:51:37
    项目需求:除固定的模块使用静态路由定义外,其他路由由后端定义配置后,以接口的形式返回给前端动态添加。这里使用 vue-router addRoutes 方法操作。 具体实现方式如下: // main.js import Vue from "vue"; ...
  • 关于vue - addRoutes动态路由碰到的问题看了一下很多人都被 这个动态添加路由这个问题困惑 ,今天来分享一下自己的思路直接上代码吧,不多逼逼了这就完啦,哪里写的不好的,请指点一下,谢谢了,第一次写,有点激动!...
  • 之前用了一个vue-element-admin做了一个小项目,里面用到了动态添加路由动态展示侧边栏, 当我切换页面时,控制台总是警告提示路由重复,连续跳转几次页面后,控制台就被这些警告占满了, vue动态添加路由,跳转...
  • 主要介绍了vue 解决addRoutes动态添加路由后刷新失效问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 1,需求: 需要判断超级管理员和普通管理员的权限,不同管理员有不同的页面,通过一个登录页登录 2,思路: 1,提前写好超级管理员和普通管理员的路由表 2,在登录的时候,登录成功哪个管理员就...import Vue from "v...
  • Vue-动态添加路由-刷新失效问题

    千次阅读 2019-07-03 06:31:50
    Vue-动态添加路由-刷新失效问题 前一篇写了实现如何动态添加路由的问题 点击进入, 由于赶项目,遗留了两个问题。现在算是基本解决了。 回顾 之前解决路由刷新失效的问题是通过全局导航守卫来实现的,虽说能实现,...
  • 我自己使用addRoutes动态添加路由页面,使用router-link标签可以跳转,但是一刷新就会自动跳转到我定义的通配符 * 指向的404路由页面。这说明没有找到指定路由才跳到404路由的。 我的默认路由是这样子的(这是还没...
  • 你是电,你是光,你是最美的太阳
  • 这篇文章主要介绍了vue 解决addRoutes动态添加路由后刷新失效问题,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 前言 某些场景下我们需要利用addRoutes动态添加路由,但是刷新后就会失效,前段时间...
  • 没有的话,去获取权限,根据权限添加相应的路由 代码完成后,登录可以正常访问,达到预期结果 !!!但是,刷新页面报错 原因: 再App.vue中设置了,刷新保存store 可能是因为刷新加载时,把旧的...
  • 网上一大堆解决失效问题的,我感觉有点繁琐,所 以的问题都是next的问题,不知道next({ ...to.path, replace: true })这个语法干嘛,问题就出在这句话了,本人后来改成 next(to.path)这样,所有的问题都没有了 ...
  • vue-router动态添加路由

    2020-03-24 10:57:58
    **vue-router动态添加路由** 一、定义初始化默认路由 二、动态配置路由,这里是把所有组件中相应的路由配置成一个个的对象,根据后台返回的菜单tree一个个去匹配 三、通过匹配,把匹配好的路由数据addRoutes到...
  • 用户登录成功,通过用户角色从服务器获取路由添加vue-router中。 因为侧边栏存在路由嵌套,所以后端设计数据库时添加路由id字段,递归获取所有路由数据 根据路由格式创建Router类和路由meta信息类RouterMeta...
  • 之前的写法 ...import Vue from 'vue' import MessageBroadcast from 'page/MessageBroadcast' import Survey from 'page/Survey' import MessageFingure from 'page/MessageFingure' import Inte...
  • Vue-动态添加路由

    2019-07-01 15:30:54
    Vue-动态添加路由 最近项目中有个需求 - 需要动态添加页面以及路由。过程很煎熬。但是实现之后,再看一下流程、代码,其实发现并没有多少东西。 添加嵌套的子路由 const children = [] const routerData = [{ /...
  • 使用场景:用户登录后获取菜单列表,然后动态添加路由和菜单,实现根据用户权限实现动态添加路由。 昨天搞了半个晚上一直困惑使用(Router.addRoutes)在路由拦截器里,一直问题,今天早上到了公司,咨询了下老大和一...
  • vue动态添加权限路由

    2020-08-24 11:19:31
    在做后台系统时一般都会涉及到菜单权限控制的问题,这里的处理是根据后端返回的权限表,生成动态路由来控制权限,话不多说,上代码。
  • 前言 在我们做一个管理系统的时候,一般比较重要也是最基础的地方就是权限管控这部分。 权限管理在来说基本有两个方面: ... 2、动态添加只在权限内的菜单和路由,当用户输入url绕过菜单时,显示404页...

空空如也

1 2 3 4 5 ... 20
收藏数 266,837
精华内容 106,734
关键字:

动态添加路由