精华内容
下载资源
问答
  • Vue路由传参两种方式

    千次阅读 2018-05-20 01:13:01
    vue-router路由中,传参方式一般分两种:利用$route.query对象的Get方式传参,与http的get方式一样,会将参数暴露到地址栏,使用方式如下:路由请求发起(编程式导航):this.$router.push({path:'/selectById', ...

    在vue-router路由中,传参方式一般分两种:


    利用$route.query对象的Get方式传参,与http的get方式一样,会将参数暴露到地址栏,使用方式如下:

    路由请求发起(编程式导航):

    this.$router.push({path:'/selectById', query: {id: this.id}});

    参数接收:

    {{this.$route.query.searchBody}}

    另一种是利用$route.params对象的Post方式传参,该方式具有一定限制,必须通过路径传参方式。

    路由配置(根组件的路由配置js,若是vue-cli构建则为src/router/index.js):

    import Vue from 'vue'
    import Router from 'vue-router'
    import User from '@/components/User'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          redirect: 'index'
        },
        {
          path: '/selectById/:id',
          component: User
        }
      ]
    })

    路由请求发起:

    this.$router.push({path:'/selectById', params: {id: this.id}});

    参数接收:

    {{this.$route.params.searchBody}}

    以上是常用的两种router传参方式,特别需要注意如果params不通过路径地址传参的话是取不到值的。

    展开全文
  • vue路由高亮的两种方式 1.第一种使用mui 如果每一个tab中有mui-active这个类此时tab就会高亮,如果不写mui-active这个类的话,默认有router-link-active这个类,我们还需要自己在这个类中写高亮样式,已经有现成的...

    vue路由高亮的两种方式

    1.第一种使用mui
    在这里插入图片描述
    如果每一个tab中有mui-active这个类此时tab就会高亮,如果不写mui-active这个类的话,默认有router-link-active这个类,我们还需要自己在这个类中写高亮样式,已经有现成的高亮类mui-active,所以解决方法为:在路由中实现在这里插入图片描述

    第二种方式:判断路径,如果此时在首页,首页的路径为/msite,判断是不是和当前路径相同,如果相同,则高亮类 guide-item 生效。
    :class="{on: ‘/msite === $route.path’}"
    在这里插入图片描述

    展开全文
  • Vue中的两种路由方式

    2020-12-30 22:55:44
    Vue中的两种路由方式 一、query+path 二、params+name

    给定初始页面

    One页面

    在这里插入图片描述


    一、query+path

    传参形式为:url?id=1001&name=Brave-Y

    <template>
      <div>我是one页面,点击跳转<button @click="gotwo">去two</button></div>
    </template>
    <script>
    export default {
      name: 'one',
      methods: {
        gotwo () {
        // 1.query+path
        // url?id=1001&name=Brave-Y
          this.$router.push({
            path: '/two',
            query: {
              id: 1001,
              name: 'Brave-Y'
            }
          })
        }
      }
    }
    </script>
    
    

    在这里插入图片描述
    发顺丰

    二、params+name

    地址栏无参数

    <template>
      <div>我是one页面,点击跳转<button @click="gotwo">去two</button></div>
    </template>
    <script>
    export default {
      name: 'one',
      methods: {
        gotwo () {
          // 2.params+name
          this.$router.push({
            name: 'two',
            params: {
              id: 1001,
              name: 'Brave-Y'
            }
          })
        }
      }
    }
    </script>
    

    在路由文件中给T模块加一个name,可以给路由绑定值

      {
        name: 'two',
        path: '/two',
        // path: '/two/:id',
        component: Two
      },
    

    path: '/two', path: '/two/:id',

    在这里插入图片描述
    1.query+path

    <template>
      <div>我是two页面,我收到了:{{$route.query.name}}发过来的id:{{$route.query.id}}</div>
    </template>
    

    2.params+name

    <template>
      <div>我是two页面,我收到了:{{$route.params.name}}发过来的id:{{$route.params.id}}</div>
    </template>
    

    总结

    对比看一下两种页面跳转时的地址栏参数,使用query+path路由方式,在地址栏时可以看到请求参数,这一点和Get请求很类似,如果使用params+name路由方式,并且不在路由文件中绑定值,在地址栏上也不会有请求参数

    展开全文
  • vue动态路由路由懒加载

    多人点赞 2021-06-28 16:33:26
    这种path和Component的匹配关系,我们称之为动态路由(也是路由传递数据的一种方式)。 1、配置router 2、使用路由 3、创造用户组件并使用传进来的用户信息 在compute中用this.$route.params.userId,...

    目录

    1、动态路由

    1、配置router

    2、使用路由

    3、创造用户组件并使用传进来的用户信息

    2、路由懒加载

    1、懒加载的方式

    2、懒加载举例


    1、动态路由(通过$route.params获得数据

    某些情况下,一个页面的path路径可能是不确定的,比如我们进入用户界面时,希望是如下的路径/user/aaaa/user/bbbb。p除了有前面的/user之外,后面还跟上了用户的ID。这种pathComponent的匹配关系,我们称之为动态路由(也是路由传递数据的一种方式)

    1、配置router

    2、使用路由

    1、用组件传递

    2、用函数代码传递

    3、创造用户组件并使用传进来的用户信息

    在compute中用this.$route.params.userId,但是mustache语法中直接$route.params.userId

    参考上面的message就是这样的

    2、路由懒加载

    1、懒加载的方式

    2、懒加载举例

    路由懒加载前

    路由懒加载后(打包后的js分成了多个部分,懒加载了Home和About其实就是把Home和About分成了另外两个js,当需要的时候才加载。)

    参考视频:

    https://www.bilibili.com/video/BV1H7411j7Mc?from=search&seid=10645859101733219162

    展开全文
  • 1.动态路由传值 在我这个项目里要实现的是从 News.vue 跳转到Content.vue News.vue &lt;template&gt; &lt;!-- 所有的内容要被根节点包含起来--&gt; &lt;div id="news"&gt; 我...
  • vue 路由传参的两种方式

    千次阅读 2020-08-11 10:30:56
    vue 路由传参虽然有好几种写法,但本质上分为两种,一种是 get 类型的传参,一种是 post 类型的传参。 1. get 类型的传参 get 类型传参的三种写法: this.$router.push('/addres?id=12345') this.$router.push({ ...
  • Vue动态路由传参 query传参 params传参 //定义Detail路由 { path: '/detail/:id', name: 'Detail' component: () => import('@/views/Detail.vue') } 1.query方式传参和接收参数 传参: this.$router.push({...
  • vue动态路由跳转

    2020-09-20 15:03:12
    vue动态路由跳转有push、replace等方法。最近有个需求是需要从不同的路由点击某个操作按钮进行路由跳转。 之前用的是replace方法,因为要带参数,想到的办法是用模板字符串把所有的参数拼接在地址栏上传参过去。 ...
  • vue动态路由权限管理

    千次阅读 2020-09-22 15:42:59
    动态路由设置一般有两种: (1)、简单的角色路由设置:比如只涉及到管理员和普通用户的权限。通常直接在前端进行简单的角色权限设置 (2)、复杂的路由权限设置:比如OA系统、多种角色的权限配置。通常需要后端返回...
  • 主要介绍了vue-router 源码实现前端路由两种方式,主要介绍Hash 路由和History 路由,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Vue 动态路由的实现

    千次阅读 2020-08-17 18:07:30
    vue项目实现动态路由方式大体可分为两种: 前端这边把路由写好,登录的时候根据用户的角色权限来动态展示路由,(前端控制路由) 详情可参阅花裤衩大佬的项目手把手…,我当时看这个项目看了好久才明白一点逻辑,...
  • 在配置路由时,路由路径上添加参数,既配置成动态路由。在修改操作时,就常用到动态路由配置。 配置动态路由: let update= { path: '/update/:uid/:name', name: 'Update', component: () => import('@/...
  • 【vue】vue路由传参的三种方式

    千次阅读 2018-10-22 10:30:13
    传参方式可划分为 params 传参和 query 传参,而 params 传参又可分为在 url 中显示参数和不显示参数两种方式,这就是vue路由传参的三种方式方式一:params 传参(显示参数) params 传参(显示参数)又可分为 ...
  • vue路由懒加载的两种方式

    千次阅读 多人点赞 2019-04-03 14:37:59
    1、当一个vue项目很大的时候,对于一些“暂时”用不到的组件,我们可以不...2、常用的懒加载方式两种:即使用ES中的import 和vue异步组件 2.1 未使用懒加载 import HelloWorld from '@/components/HelloWorld...
  • ant design pro vue 动态路由 前后端详解前言流程图 前言 官方提供了两种实现权限的方法 官网地址 1:前端路由表写死(设置权限标识) 根据后端返回的权限标识生成路由表 2:动态路由 路由表由后端返回 前端根据返回的 ...
  • 今天小编就为大家分享一篇vue-router之nuxt动态路由设置的两种方法小结,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 1.第一种方式:通过在router-link中用?&amp;等符号进行操作,操作的是query元素 2.第二种方式:在routeer-link中给id赋值,将占位符的位置取代,操作的是parames元素 &lt;!DOCTYPE html&gt; &lt...
  • vue动态路由*keep-alive

    2020-08-27 14:49:27
    一般tab切换实现常用的两种方法: 1 vue-router路由匹配实现 2 动态路由 动态路由:让多个组件使用同一个挂载点,来实现动态切换。 component is 通过 v-bind:is=“组件名” 中的组件名去自动匹配组件,如果匹配不到...
  • Vue动态路由的前端实现,网上有不少参考资料。但大多存在代码冗余,思路模糊不清的情况。现在整理一下思路。当前端发送登录请求login向后台请求数据后,后台会返回一个user对象至前端,前端把该对象保存至vuex中,...
  • vue路由的几种方式

    千次阅读 2020-07-08 21:29:17
    beforeRouteUpdate(动态路由发生变化的时候调用) beforeRouteUpdate(to,from,next){ console.log(to) next() } 离开守卫 免战牌页面(404页面) 4.编程式导航 replace可以节省内存 router(拿到方法或属性) ...
  • vue 路由(router)导入两种方式

    千次阅读 2020-06-21 15:40:37
    vue 路由(router)导入两种方式
  • vue路由两种模式

    千次阅读 2020-04-25 21:59:03
    hash与history 对于Vue 这类渐进式前端开发框架,为了构建SPA(单页面...一、为了达到这个目的,浏览器提供了以下两种支持: 1、hash ——即地址栏URL中的#符号(此hsah 不是密码学里的散列运算)。 比如这个URL:h...
  • vue动态路由,前端请求路由。addRoutes。 需求: 之前都是前端固定写好路由,然后跳来跳去,虽然做的有根据登录者类型去做左侧菜单筛选(隐藏,显示),也添加了路由守卫对路由进行拦截处理。但是并不安全,因为在...
  • 最近做项目,遇到了动态路由权限问题,看了一些文章,踩了天坑,算是实现了。和大家分享一下,有错误的地方请大神指出来。目前没有接口,我采用的vuex存储用户名信息来获取配置的路由js。 1、我们先看一下我的...
  • Vue 动态路由和权限菜单的实现思路

    千次阅读 2019-07-09 16:53:59
    为什么不贴代码详细说而是只讲思路呢——对,因为我懒……实际上动态菜单和动态路由的思路还是比较简单的,只是平日只在路由文件里配静态路由什么都不需要多考虑的,一上来可能会有点懵逼,当然这里边也多少有点小坑...
  • 本文我们来介绍一下Vue中的 路由传参 问题,首先我们来准备一个基本路由的页面,如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</...
  • VUE 动态路由配置,以及vuerouter生命周期函数失效的问题 如何配置动态路由 在router/index下配置 { path:'/user:id',//使用:就可以将id变为动态绑定 name:'user' } 遇到的问题 组件会复用,生命周期函数不会被...
  • 面试的时候可能会问出这样的问题,请说出vue路由中的俩传参方法,route和router的区别 首先 route是指的当前的路由对象 router则是指的是 vue-router的实例 这个还有区别开的 有的童鞋可能知道路由 地址栏传参的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 26,292
精华内容 10,516
关键字:

vue动态路由两种方式

vue 订阅