页面之间的跳转传参,正常前端js里写 window.location.href="xxxxx?id=1" 就可以了;

但是vue不一样 需要操作的是路由history,需要用到 VueRouter,

示例:

常用的场景是:列表页点击“查看”按钮,跳转到详情页。

在列表页(list.vue)按钮点击事件里写上

detail(row) {
this.$router.push({ path: "detail", query: { id: row.id } });
},

运行时浏览器地址栏展示:

http://localhost:8080/#/orders/detail?id=31

在详情页(detail.vue)里写上

 let id = Number(this.$route.query.id);

即可获取到参数id了。

解析

先看看 $router 和$route是什么,在vscode f12后

看到

declare module "vue/types/vue" {
interface Vue {
$router: VueRouter;
$route: Route;
}
}

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。

VueRouter官网 传送门

route是一个跳转的路由对象,每一个路由都会有一个route对象,是一个局部的对象,可以获取对应的name,path,params,query等

其中

  • params

    {}对象,包含路由中的动态片段和全匹配片段的键值对 用来实现 /order.detail/1
  • query

    {}对象,包含路由中查询参数的键值对。 用来实现 /order/detail?id=1

vue 页面跳转传参的更多相关文章

  1. vue页面跳转传参

    跳转页 this.$router.push({name:'路由命名',params:{参数名:参数值,参数名:参数值}}) 接收页 this.$route.params.参数名

  2. 小程序页面跳转传参-this和that的区别-登录流程-下拉菜单-实现画布自适应各种手机尺寸

    小程序页面跳转传参 根目录下的 app.json 文件 页面文件的路径.窗口表现.设置网络超时时间.设置多 tab { "pages": [ "pages/index/i ...

  3. js实现静态页面跳转传参

    最近有个项目: 存静态web服务,一个新闻页面列表出所有新闻摘要信息,然后通过点击新闻详情访问到该新闻的详情页面: 新闻展示的页面通过ajax请求接口获取到新闻的摘要信息,预计想通过id的方式访问到新 ...

  4. 【转】request和response的页面跳转传参

    下面是一位园友的文章: jsp或Servlet都会用到页面跳转,可以用 request.getRequestDispatcher("p3.jsp").forward(request ...

  5. vue路由跳转传参的两种方法

    路由跳转: this.$router.push({ name: '工单列表', params: {p_camera_dev_name: 'xxx'} }); 使二级菜单呈点击状态: $('[index ...

  6. vue具体页面跳转传参方式

    1.写数据,可以使用“.”,”[]”,以及setItems(key,value);3种方式. 例如: localStorage.name = proe;//设置name为" proe &qu ...

  7. 微信小程序页面跳转传参

    1.传递参数方法   使用navigatior组件 <navigator url="/pages/pull/pull?title=lalla&name=cc" hov ...

  8. 微信小程序页面跳转传参方式

    //实现跳转的A页面 jump: function () { let a = 1; let b = 2; wx.navigateTo({ url: '/page/vipOrder/vipOrder?d ...

  9. 小程序页面跳转传参参数值为url时参数时 会出现丢失

    当参数的值为url的时候,  ?号   _  下划线   等等 都会被 截取掉,看不到,  这样在 另一个页面 options中  截取的url就不完全 let url="http://ba ...

随机推荐

  1. MySQL高速缓存

    MySQL高速缓存启动方法及参数详解query_cache_size=32M query_cache_type=1,默认配置下,MySQL的该功能是没有启动的,可能你通过show variables ...

  2. Window.open使用总结

    前言 今天在项目中,突然看到window.open的使用,感觉还是很神奇,突然心血来潮查看了window.open的用法. 用途 主要用于在打开网站时弹出的其他窗口.用于通知广告一类的. 用法 win ...

  3. xlistview错误

    apply plugin: 'com.android.library' android { compileSdkVersion buildToolsVersion '26.0.1' defaultCo ...

  4. C#连接sqlserver分页查询的两个简单的方法

    /// <summary>        /// 分页查询函数        /// </summary>        /// <param name="co ...

  5. JMeter定制Sampler

    1.背景 相信大家在使用JMeter工具测试的时候,经常会遇到自带采样器无法满足测试要求的情况.面对这种情况,通常的办法是使用万能的自定义Java Request的达到测试目的.这个方法有个弊端,只要 ...

  6. 曹工杂谈:Java 类加载还会死锁?这是什么情况?

    一.前言 今天事不是很多,正好在Java交流群里,看到一个比较有意思的问题,于是花了点时间研究了一下,这里做个简单的分享. 先贴一份测试代码,大家可以先猜测一下,执行结果会是怎样的: import j ...

  7. 干货 | Elasticsearch、Kibana数据导出实战

    1.问题引出 以下两个导出问题来自Elastic中文社区. 问题1.kibana怎么导出查询数据? 问题2:elasticsearch数据导出 就像数据库数据导出一样,elasticsearch可以么 ...

  8. 蔡勒(Zeller)公式及其推导:快速将任意日期转换为星期数

    0. 本文的初衷及蔡勒公式的用处 前一段时间,我在准备北邮计算机考研复试的时候,做了几道与日期计算相关的题目,在这个过程中我接触到了蔡勒公式.先简单的介绍一下蔡勒公式是干什么用的. 我们有时候会遇到这 ...

  9. mybatis 中 useGeneratedKeys 和 keyProperty 含义

    MyBatis如何获取插入记录的自增长字段值: 第一步: 在Mybatis Mapper文件中添加属性“useGeneratedKeys”和“keyProperty”,其中keyProperty是Ja ...

  10. 以后可得记住了--Python笔试面试题小结

    1.字符串处理 将字符串中的数字替换成其两倍的值,例如: 修改前:"AS7G123m (d)F77k" 修改后:"AS14G246m (d)F154k"   个 ...