Vue中this.$router.push参数获取方法

传递参数的方法：

1.Params

由于动态路由也是传递params的，所以在 this.$router.push() 方法中path不能和params一起使用，否则params将无效。需要用name来指定页面。

及通过路由配置的name属性访问

在路由配置文件中定义参数：

通过name获取页面，传递params：

在目标页面通过this.$route.params获取参数：

2.Query

页面通过path和query传递参数，该实例中row为某行表格数据

在目标页面通过this.$route.query获取参数：

this.$route.query.row.xxx

以上这篇Vue中this.$router.push参数获取方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

  • Vue系列：通过vue-router如何传递参数示例
  • 详解vue-router 2.0 常用基础知识点之router.push()
  • 详解vue-router2.0动态路由获取参数
赞 (0)

相关推荐

  • Vue系列：通过vue-router如何传递参数示例

    使用vue-router 来实现webapp的页面跳转,有时候需要传递参数,做法如下: 参考文献:http://router.vuejs.org/en/named.html 主要有以下几个步骤: (1) 设置好路由配置 router.map({ '/history/:deviceId/:dataId': { name: 'history', // give the route a name component: { ... } } }) 这里有2个关键点: a)给该路由命名,也就是上文中的 na

  • 详解vue-router 2.0 常用基础知识点之router.push()

    除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现. router.push(location) 想要导航到不同的 URL,则使用 router.push 方法.这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL. 当你点击 <router-link> 时,这个方法会在内部调用,所以说,点击 <router-link :to="...&

  • 详解vue-router2.0动态路由获取参数

    详解vue-router2.0动态路由获取参数

    一下demo演示2.0中的vue-router是如何获取到不同参数的,并在地址栏中匹配不同的信息 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="vue.js&qu

  • Vue中this.$router.push参数获取方法

    传递参数的方法: 1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中path不能和params一起使用,否则params将无效.需要用name来指定页面. 及通过路由配置的name属性访问 在路由配置文件中定义参数: 通过name获取页面,传递params: 在目标页面通过this.$route.params获取参数: 2.Query 页面通过path和query传递参数,该实例中row为某行表格数据 在目标页面通过this.$route

  • Vue中this.$router和this.$route的区别及push()方法

    官房文档里是这样说明的: 通过注入路由器,我们可以在任何组件内通过 this.$router 访问路由器,也可以通过 this.$route 访问当前路由 可以理解为: this.$router 相当于一个全局的路由器对象,包含了很多属性和对象(比如 history 对象),任何页面都可以调用其 push(), replace(), go() 等方法. this.$route 表示当前路由对象,每一个路由都会有一个 route 对象,是一个局部的对象,可以获取对应的 name, path, pa

  • vue.js this.$router.push获取不到params参数问题

    主要通过两种方式传参 1.query方式传参和接受参数 this.$router.push({ path:'/xxx' query:{ idname:id } }) 接收的方式:this.$route.query.id 2.params方式传递参数 this.$router.push({ name:'路径名称' query:{ idname:id } }) 接收的方式:this.$route.params.id 代码 this.$router.push({ path: '/container',

  • Vue this.$router.push(参数)实现页面跳转操作

    很多情况下,我们在执行点击按钮跳转页面之前还会执行一系列方法,这时可以使用 this.$router.push(location) 来修改 url,完成跳转. push 后面可以是对象,也可以是字符串: // 字符串 this.$router.push('/home/first') // 对象 this.$router.push({ path: '/home/first' }) // 命名的路由 this.$router.push({ name: 'home', params: { userId

  • vue中监听路由参数的变化及方法

    在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新. mounted: () =>{ this.id = this.$route.query.id; this.getdetail() } getDetail()方法中会用到this.id这个参数,在同一页面切换id的值,并不会触发vue的声明周期函数. 可以添加路由监听: watch: { $route: { handler() { this.id = this.$route.query.id; this.get

  • vue路由跳转传参数的方法

    vue中路由跳转传参数有多种,自己常用的是下面的几种 通过router-link进行跳转 通过编程导航进行路由跳转 1. router-link <router-link :to="{ path: 'yourPath', params: { name: 'name', dataObj: data }, query: { name: 'name', dataObj: data } }"> </router-link> 1. path -> 是要跳转的路由路径

  • vue中常见的问题及解决方法总结（推荐）

    vue中常见的问题及解决方法总结（推荐）

    有一些问题不限于 Vue,还适应于其他类型的 SPA 项目. 1. 页面权限控制和登陆验证页面权限控制 页面权限控制是什么意思呢? 就是一个网站有不同的角色,比如管理员和普通用户,要求不同的角色能访问的页面是不一样的.如果一个页面,有角色越权访问,这时就得做出限制了. 一种方法是通过动态添加路由和菜单来做控制,不能访问的页面不添加到路由表里,这是其中一种办法.具体细节请看下一节的<动态菜单>. 另一种办法就是所有的页面都在路由表里,只是在访问的时候要判断一下角色权限.如果有权限就允许访问,没有

  • 详解Vue中的MVVM原理和实现方法

    下面由我阿巴阿巴的详细走一遍Vue中MVVM原理的实现,这篇文章大家可以学习到: 1.Vue数据双向绑定核心代码模块以及实现原理 2.订阅者-发布者模式是如何做到让数据驱动视图.视图驱动数据再驱动视图 3.如何对元素节点上的指令进行解析并且关联订阅者实现视图更新 一.思路整理 实现的流程图: 我们要实现一个类MVVM简单版本的Vue框架,就需要实现一下几点: 1.实现一个数据监听Observer,对数据对象的所有属性进行监听,数据发生变化可以获取到最新值通知订阅者. 2.实现一个解析器Compi

  • React和Vue中监听变量变化的方法

    React 中 本地调试React代码的方法 yarn build 场景 假设有这样一个场景,父组件传递子组件一个A参数,子组件需要监听A参数的变化转换为state. 16之前 在React以前我们可以使用 componentWillReveiveProps 来监听 props 的变换 16之后 在最新版本的React中可以使用新出的 getDerivedStateFromProps 进行props的监听, getDerivedStateFromProps 可以返回 null 或者一个对象,如果

  • vue中使用极验验证码的方法（附demo）

    前言: vue中使用极验验证码,最好是在页面渲染的时候(mounted)进行验证码的初始化,然后在初始化回调中绑定触发弹出验证码的事件.这样在点击按钮或者进行特定操作时能够快速的弹出验证码. 关键代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt

随机推荐