精华内容
下载资源
问答
  • 使用vue动态路由(“/route/:id” 形式) 传参的时候,修改页面参数,但是视图仍旧是之前的内容,没有进行刷新,示例如下: 原因分析: 具体原因在vue官方文档:响应路由参数的变化一节中有讲过: 当使用路由参数时...
  • 主要介绍了vue动态路由配置,vue路由传参的方式,文中给大家提到了router-link这个组件的相关知识,需要的朋友可以参考下
  • 在我不知道vue路由还可以通过addRoutes动态添加时,我只知道vue路由都是写死在路由表中的,每当跳转时再去加载相应的路由。直到在一个新公司接到需要根据用户的权限显示不同的菜单的需求时才知道了原来vue-...
  • 1 什么的动态路由 根据路径不同,显示内容不同。就像图片路径:image/1 ,其中变化的就是这个“1”,根据这个数字的变化会展示不同的图片。 2 页面编写 在src/components路径下创建item.vue,其中内容为(当然你也可以...

    该文章的项目是我的上篇文章的项目,上篇博客地址:上篇博文

    1 什么的动态路由

    根据路径不同,显示内容不同。就像图片路径:image/1 ,其中变化的就是这个“1”,根据这个数字的变化会展示不同的图片。

    2 页面编写

    在src/components路径下创建item.vue,其中内容为(当然你也可以不使用id,使用别的你想要的名字)

    <template>
        <div >
            传递来的数据是: {{ $route.params.id }}
        </div>
    </template>
    

    如果你想在脚本(script标签)中使用这个id值,可以这么写

    this.$route.params.id
    

    3 修改路由

    修改src/router/index.js,引入item组件

    import item from '@/components/item'
    

    添加路由设置(在item中你使用的如果是别的名字,这里的id也要改成相同的)

        {
          path: '/item/:id',
          name: 'Item',
          component: item
        }
    

    4 修改list

    修改src/components/list.vue, 增加链接

    <template>
      <div>
        这是一个列表
        <router-link to="/item/100">新闻100</router-link>
        <router-link to="/item/200">新闻200</router-link>
        <router-link to="/item/300">新闻300</router-link>
      </div>
    </template>
    

    成果

    进入项目页面,点击列表
    在这里插入图片描述
    点击“新闻100”
    在这里插入图片描述
    点击“新闻200”
    在这里插入图片描述

    相关文章

    vue嵌套路由:嵌套路由教学

    展开全文
  • 利用 vue-router 的 addRoutes 方法可以动态添加路由。 先看一下官方介绍: router.addRoutes router.addRoutes(routes: Array) 动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。 举个例子: ...
  • 今天小编就为大家分享一篇vue实现权限控制路由(vue-router 动态添加路由),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要给大家介绍了关于vue路由教程之静态路由的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
  • 动态路由不同于常见的静态路由,可以根据不同的「因素」而改变站点路由列表。这篇文章主要介绍了Vue Router 实现动态路由和常见问题解决方案,需要的朋友可以参考下
  • Vue 动态路由的实现

    千次阅读 2020-08-17 18:07:30
    vue项目实现动态路由的方式大体可分为两种: 前端这边把路由写好,登录的时候根据用户的角色权限来动态展示路由,(前端控制路由) 详情可参阅花裤衩大佬的项目手把手…,我当时看这个项目看了好久才明白一点逻辑,...

    vue项目实现动态路由的方式大体可分为两种:

    • 前端这边把路由写好,登录的时候根据用户的角色权限来动态展示路由,(前端控制路由)

    详情可参阅花裤衩大佬的项目手把手…,我当时看这个项目看了好久才明白一点逻辑,
    因为大神的动态路由那里有好多层判断,并且穿插各种vuex,把小白的我都快搞懵逼了,对我启发很大,也正是这篇文章,给我提供了很多逻辑

    • 后台传来当前用户对应权限的路由表,前端通过调接口拿到后处理(后端处理路由)

    今天我们来讲讲用后台传递路由表实现动态路由的思路,因为公司的项目里路有部分用到了vuex,我就把路由部分脱离vuex整理了出来,让大家有个启发,并不是绝对的解决方案,只是思路
    github:https://github.com/Mrblackant…
    在线查看:http://an888.net/antRouter/#/…

    思路整理

    以下四步骤对应的代码都在下方会讲到,并且是对应的

    • 后台同学返回一个json格式的路由表,我用easymock造了一段:动态路由表,大家可参考;
    • 因为后端同学传回来的都是字符串格式的,但是前端这里需要的是一个组件对象啊,写个方法遍历一下,将字符串转换为组件对象;
    • 利用vue-router的beforeEach、addRoutes、localStorage来配合上边两步实现效果;
    • 左侧菜单栏根据拿到转换好的路由列表进行展示;
    大体步骤:拦截路由->后台取到路由->保存路由到localStorage(用户登录进来只会从后台取一次,其余都从本地取,所以用户,只有退出在登录路由才会更新)

    代码

    1、路由表

    每个路由都使用到组件Layout,这个组件是整体的页面布局:左侧菜单列,右侧页面,所以children下边的第一级路由就是你自己的开发的页面,meta里包含着路由的名字,以及路由对应的icon;
    因为可能会有多级菜单,所以会出现children下边嵌套children的情况;

    路由是数组格式
    "data": {
        "router": [
          {
            "path": "",
            "component": "Layout",
            "redirect": "dashboard",
            "children": [
              {
                "path": "dashboard",
                "component": "dashboard/index",
                "meta": {
                  "title": "首页",
                  "icon": "dashboard"
                }
              }
            ]
          },
          {
            "path": "/example",
            "component": "Layout",
            "redirect": "/example/table",
            "name": "Example",
            "meta": {
              "title": "案例",
              "icon": "example"
            },
            "children": [
              {
                "path": "table",
                "name": "Table",
                "component": "table/index",
                "meta": {
                  "title": "表格",
                  "icon": "table"
                }
              },
              {
                "path": "tree",
                "name": "Tree",
                "component": "tree/index",
                "meta": {
                  "title": "树形菜单",
                  "icon": "tree"
                }
              }
            ]
          },
          {
            "path": "/form",
            "component": "Layout",
            "children": [
              {
                "path": "index",
                "name": "Form",
                "component": "form/index",
                "meta": {
                  "title": "表单",
                  "icon": "form"
                }
              }
            ]
          },
          {
            "path": "*",
            "redirect": "/404",
            "hidden": true
          }
        ]
      }
    
    2.将后端传回的"component": “Layout”, 转为"component": Layout组件对象

    因为有多级路由的出现,所以要写成遍历递归方法,确保把每个component转成对象,
    因为后台传回的是字符串,所以要把加载组件的过程 封装成一个方法(此处参考花裤衩大神的解决方法),用这个方法在遍历中使用;详情查看项目里的router文件夹下的 _import_development.js和_import_production.js文件
    Layout我放的目录跟其他文件的目录不一样,所以我在遍历里单独处理,各位小伙伴可自己调整哈

    const _import = require('./router/_import_' + process.env.NODE_ENV)//获取组件的方法
    import Layout from '@/views/layout' //Layout 是架构组件,不在后台返回,在文件里单独引入
    
    function filterAsyncRouter(asyncRouterMap) { //遍历后台传来的路由字符串,转换为组件对象
      const accessedRouters = asyncRouterMap.filter(route => {
        if (route.component) {
     **加粗文字**     if (route.component === 'Layout') {//Layout组件特殊处理
            route.component = Layout
          } else {
            route.component = _import(route.component)
          }
        }
        if (route.children && route.children.length) {
          route.children = filterAsyncRouter(route.children)
        }
        return true
      })
    
      return accessedRouters
    }
    
    3、使用beforeEach、addRoutes、localStorage来配合实现

    beforeEach路由拦截,进入判断,如果发现本地没有路由数据,那就利用axios后台取一次,取完以后,利用localStorage存储起来,利用addRoutes动态添加路由,
    ps:beforeEach好坏啊,一步小心就进入到了他的死循环,浏览器都tm崩了,得在一开始就加判断,拿到路由了,就直接next(),嘤嘤嘤
    global.antRouter是为了传递数据给左侧菜单组件进行渲染

    import axios from 'axios'
    
    var getRouter //用来获取后台拿到的路由
    
    router.beforeEach((to, from, next) => {
      if (!getRouter) {//不加这个判断,路由会陷入死循环
        if (!getObjArr('router')) {
          axios.get('https://www.easy-mock.com/mock/5a5da330d9b48c260cb42ca8/example/antrouter').then(res => {
            getRouter = res.data.data.router//后台拿到路由
            saveObjArr('router', getRouter) //存储路由到localStorage
    
            routerGo(to, next)//执行路由跳转方法
          })
        } else {//从localStorage拿到了路由
          getRouter = getObjArr('router')//拿到路由
          routerGo(to, next)
        }
      } else {
        next()
      }
    
    })
    
    
    function routerGo(to, next) {
      getRouter = filterAsyncRouter(getRouter) //过滤路由
      router.addRoutes(getRouter) //动态添加路由
      global.antRouter = getRouter //将路由数据传递给全局变量,做侧边栏菜单渲染工作
      next({ ...to, replace: true })
    }
    
    function saveObjArr(name, data) { //localStorage 存储数组对象的方法
      localStorage.setItem(name, JSON.stringify(data))
    }
    
    function getObjArr(name) { //localStorage 获取数组对象的方法
      return JSON.parse(window.localStorage.getItem(name));
    
    }
    
    4.拿到遍历好的路由,进行左侧菜单渲染

    上边第三部会给 global.antRouter赋值,这是一个全局变量(可以用vuex替代),菜单那边拿到路由,进行渲染,这里又是参考了花裤衩大神的layout部分 ,这里我就不贴代码了

    展开全文
  • vue动态路由配置,vue路由传参

    万次阅读 2018-05-23 09:28:44
    动态路由:  当我们很多个页面或者组件都要被很多次重复利用的时候,我们的路由都指向同一个组件,这时候从不同组件进入一个"共用"的组件,并且还要传参数,渲染不同的数据  这就要用到动态路由路由...

    动态路由:

      当我们很多个页面或者组件都要被很多次重复利用的时候,我们的路由都指向同一个组件,这时候从不同组件进入一个"共用"的组件,并且还要传参数,渲染不同的数据

      这就要用到动态路由跟路由传参了!

    首先我们来了解下router-link这个组件:

      简单来说,它是个导航器,利用to属性导航到目标组件,并且在渲染的时候会自动生成一个a标签,当然官方也有说明,加个tag标签属性就可以渲染不同的标签,可以浏览器端查看到

      并且当一个导航器被激活的时候,会自动加上一个css的激活样式,可以全局在路由配置中设置linkActiveClass属性,属性名就是样式css名,一般写为active

      现在基本了解了router-link,先讲一下动态路由配置吧

    我们在配置路由的时候,将目标组件的路径先配置好,如:

    比如多个路由都要进入List组件,这时候在配置路由路径后加个:id(id可随便取名,标识),这个属性id可以在$route.params.id中获取,例如:

    当前这个child组件要进入,以上配置的id就等于on;这时候在List组件中打印出$route.params.id就可以得到这个属性值on

    这个时候,不同组件进入同一目标组件时就可以得到标识跟备注了,也可以利用这个来传递一些正常的参数

    接着往下看,带参数的路由,跟获取传来的参数值

    当router-link被激活点击时,会将当前的to的值push到router对象当中(路由栈),所以这个值可以是string也可以是obj

    传参数的时候,我们就写成对象的形式,用到v-bind的js表达式

    此时整个的理解可以为:我是child组件过来的,而且我还带来了我的名字,我叫child

    在List组件当中去获取这个参数值跟id的值

    如果是不同的组件过来的,可以设置不同的id值,只要在目标组件获取属性id的值就可以了,参数就利用query.属性值来获取

    转载:https://www.cnblogs.com/zlbrother/p/7707221.html

    展开全文
  • <p>vue动态路由刷新页面后丢失,vue动态路由刷新页面后丢失</p>
  • vue 动态路由实现

    千次阅读 2019-06-04 20:43:36
    vue开发中,第二个问题就是实现动态路由,根据后端权限配置获取对应的路由,最终生成对应的菜单。如下: 1、菜单接口返回结果的数据结构 [{ "url": "/system", "code": "sysmng", "name": "系统管理", "icon": ...

    vue开发中,第二个问题就是实现动态路由,根据后端权限配置获取对应的路由,最终生成对应的菜单。如下:
    1、菜单接口返回结果的数据结构

    [{
    	"url": "/system",
    	"code": "sysmng",
    	"name": "系统管理",
    	"icon": "system",
    	"children": [{
    		"url": "menu",
    		"code": "sysmenumng",
    		"name": "菜单管理",
    		"icon": "menu",
    		"children": [],
    		"parent": "menu"
    	}],
    	"parent": ""
    }]
    

    2、实现菜单接口

    import axios from '../../../axios'
    
    // 获取导航菜单树
    export const fetchSidebarMenu = () => {
      return axios({
        url: '/system/sidebar',
        method: 'get'
      })
    }
    

    3、在store中调用菜单接口,并根据结果转换成动态路由列表

    
    function buildRouters(routers, menutree) {
      if (!menutree) {
        return
      }
      menutree.forEach(function(item) {
        var routerItem = {}
        if (!item.parent) {
          routerItem.component = Layout
          routerItem.path = item.url
          if (routerItem.path.substring(0, 1) !== '/') {
            routerItem.path = '/' + routerItem.path
          }
        } else {
          routerItem.path = item.url
          let cnt = item.component
          routerItem.component = () => import(`@/views/${cnt}`)
        }
        routerItem.name = item.code
        routerItem.meta = { 'title': item.name, 'icon': item.icon }
        routerItem.hidden = item.hidden || false
        routerItem.alwaysShow = false
        routerItem.children = []
        routers.push(routerItem)
        buildRouters(routerItem.children, item.children)
      })
    }
    
    const actions = {
      generateRoutes({ commit }) {
        return new Promise((resolve, reject) => {
          fetchSidebarMenu().then(response => {
            let accessedRoutes = []
            const { data } = response
            buildRouters(accessedRoutes, data)
            accessedRoutes.push({ path: '*', redirect: '/404', hidden: true })
            commit('SET_ROUTES', accessedRoutes)
            resolve(accessedRoutes)
          }).catch(error => {
            reject(error)
          })
        })
      }
    }
    

    4、在router.beforeEach中拦截,获取动态路由

          const hasGetUserInfo = store.getters.user
          if (hasGetUserInfo) {
            const hasPermissionRouters = store.getters.permission_routes;
            if(hasPermissionRouters.length === 0){
              const permissionRouters = await store.dispatch('permission/generateRoutes');
              router.options.routes = store.getters.permission_routes;
              router.addRoutes(store.getters.permission_routes);
              next({ ...to, replace: true })
            }else{
              next();
            }
          } 
    
    展开全文
  • vue动态路由的创建

    千次阅读 2019-04-17 09:53:19
    vue动态路由的创建 首先,需要后端的配合通过login拿到router的path;然后再组装每一个路由所需要的元素;比如title、children、component、meta等,其中最重要的就是children、component,尤其是component的组装...
  • router/index.js中只配置登录页面及首页的路径,其他页面在点击菜单时动态添加;...使用vue开发开发工具查询路由确实添加了,但是访问的页面却是一片空白。请问这样写有问题吗?正确的应该怎么写?
  • Vue动态路由的使用

    千次阅读 2019-01-23 15:38:01
    动态路由是我们可以在 vue-router 的路由路径中使用“动态路径参数” 让路径不再是固定的。 动态路由的使用场景是什么? 比如在写一个商品详情页面的时候,我们的页面结构都一样,只是渲染的数据不同而已,这时候...
  • 最近做项目,遇到了动态路由权限问题,看了一些文章,踩了两天坑,算是实现了。和大家分享一下,有错误的地方请大神指出来。目前没有接口,我采用的vuex存储用户名信息来获取配置的路由js。 1、我们先看一下我的...
  • vue动态路由,刷新页面空白问题

    千次阅读 2021-01-13 17:05:55
    导言:在vue项目中采用动态添加路由的方式,第一次进入页面会正常显示,但是点击刷新页面后会导致页面空白。原因是登录时写入vuex中的路由数据在刷新页面时被清空了,所以每次渲染页面的时候都要重新执行一下添加...
  • 本篇文章主要介绍了详解vue-router2.0动态路由获取参数,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Vue动态路由配置,f5刷新动态路由丢失,路由重定向报Promise的错误----------------其实超级简单 业务流程 用户登录(获取token) 得到用户token后,可以携带token(如果不需要token,请略过此步骤)请求动态路由...
  • Vue动态路由生成跳转外链的菜单

    千次阅读 2019-11-05 15:10:13
    // 为了防止出现后端返回结果不规范,处理有可能出现拼接出两个 反斜杠 // 如果为外部跳转,则增加beforEnter处理,target设置为blank if (!... currentRouter.path = currentRouter.path.replace('//', '/'...
  • vue动态路由刷新页面参数丢失问题

    千次阅读 2020-10-17 13:41:45
    例如我们在router.js中是这么写的 ...查阅相关文档后,发现vue有两种传参方式:params和query,正确的传参姿势应该是这样: params方式: query方式: 通过上面对比可以发现,params是和name配合使用,而
  • 主要介绍了vue 解决addRoutes动态添加路由后刷新失效问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue动态路由传参

    千次阅读 2018-09-03 13:41:32
    动态路由传参:  当我们很多个页面或者组件都要被很多次重复利用的时候,我们的路由都指向同一个组件,这时候从不同组件进入一个"共用"的组件,并且还要传参数,渲染不同的数据,这就要用到动态路由跟...
  • vue动态路由来生成系统菜单(一)

    千次阅读 2019-03-15 15:50:48
    先说下功能吧,就是菜单通过动态路由进行渲染出来,而不是路由配置写死来实现。虽然网上已经有各种帖子来介绍,但我还是折腾了快2天才搞定。 直接上代码吧 &amp;amp;amp;lt;template&amp;amp;amp;gt; &...
  • vue 动态路由刷新404问题

    千次阅读 2020-02-07 21:37:55
    问题出在静态路由下面有个通配符匹配到/404页面 我们把静态路由下的 { path: '*', redirect: '/404', hidden: true } 删除就可以了。 在动态路由校验的代码中有处理跳转404的代码 ...
  • Vue 动态路由和权限菜单的实现思路

    千次阅读 2019-07-09 16:53:59
    为什么不贴代码详细说而是只讲思路呢——对,因为我懒……实际上动态菜单和动态路由的思路还是比较简单的,只是平日只在路由文件里配静态路由什么都不需要多考虑的,一上来可能会有点懵逼,当然这里边也多少有点小坑...
  • 一个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 view ...
  • vue动态路由配置

    千次阅读 2017-12-15 10:35:45
    最近写的一个项目,需要配置一个动态路由,就是路径调到一个页面上去,而且后面的参数是可传可不传的。废话不多说看代码…… 在index.js文件下export default new Router({ routes: [ { //根路由 path: '/', ...
  • 这篇文章主要是为了解决vue动态路由异步加载import组件,加载不到module的问题,这个问题困惑我了很久,终于找到了解决方法,希望对你们也遇到这样问题的人有所帮助。 报错信息 原因是webpack在编辑es6的时候动态...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 132,724
精华内容 53,089
关键字:

vue动态路由

vue 订阅