果然还好是一小部分一小部分记录的好。

<router-link :to="info">中:to特性可以是路径str,也可以是一个对象形式str。

当info是对象时可以携带参数:

  1.{path:str,query:{x:a,y:b}},在另一个视图中可以$route.query.x获取数据。

  2.{name:pre_name,params:{x:a,y:b}} ,pre_name是routes 配置路由时路由的名字。这里name的意义是对路由的引用。此时params可以携带数据到另一个视图。

  注意:方式1中如果query换成params,是无效的。

   第2种方式相当于router.push({ name: pre_name, params: { userId: 123 }})

另一种传参方式是动态路由匹配:

  在配置路由时,这你对要复用的组件,比如新闻、通知、游记等需要复用组件的情况:

  const routes = [{ path: '/news/:id/:title', component: news}];

  在页面<router-link  to="/news/15/新产品开售">直接跳转

  news视图中$route.params.id获取id或title.

  另外,在配置路由的时候可以对动态参数正则:

  const routes = [{ path: '/news/:id(\\d+)/:title', component: news}];

router-link传参的更多相关文章

  1. React Router路由传参方式总结

    首先我们要知道一个前提,路由传递的参数我们可以通过props里面的属性来获取.只要组件是被<Router>组件的<component>定义和指派的,这个组件自然就有了props ...

  2. react router路由传参

    今天,我们要讨论的是react router中Link传值的三种表现形式.分别为通过通配符传参.query传参和state传参. ps:进入正题前,先说明一下,以下的所有内容都是在react-rout ...

  3. vue中this.$router.push() 传参

    1  params 传参 注意⚠️:patams传参 ,路径不能使用path 只能使用name,不然获取不到传的数据 this.$router.push({name: 'dispatch', para ...

  4. Vue的Router路由传参

    一.文件结构 二.vue.js 打开此链接 https://cdn.bootcss.com/vue/2.6.10/vue.js 复制粘贴页面的所有内容 三.vue-router.js 打开此链接  h ...

  5. vue $router.push 传参的问题

    $router 和 $route的区别 $route为当前router跳转对象里面可以获取name.path.query.params等 $router为VueRouter实例,想要导航到不同URL, ...

  6. vue router使用query和params传参的使用

    传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,希望可以帮到大家. Vue ...

  7. (转)vue router 如何使用params query传参,以及有什么区别

    写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞 ...

  8. 每日技术总结:vue router传参方式,js获取设备高度

    今天貌似没什么问题,23333…… 1.vue router 路由传参的方式 应用情景:从分类页(category.vue)进入商品列表页(list.vue),需要传递商品分类id(catId),商品 ...

  9. vue router 如何使用params query传参,以及有什么区别

    写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞 ...

  10. angular路由传参和获取路由参数的方法

    1.首先是需要导入的模块 import { Router } from "@angular/router";//路由传参用到 import{ActivatedRoute,Param ...

随机推荐

  1. 负载均衡服务之HAProxy基础配置(五)

    前文我们聊了下haproxy的修改报文首部的配置.压缩功能以及haproxy基于http协议自定义健康状态检测机制:回顾请参考https://www.cnblogs.com/qiuhom-1874/p ...

  2. PE文件学习(1)DOS和NT

    大致结构 DOS头和NT头之间通常还有个DOS Stub DOS头 DOS头的作用是兼容MS-DOS操作系统中的可执行文件 一般没啥用 记录着PE头的位置 DOS头定义部分 typedef struc ...

  3. vue 开发规范

    本文档为前端 vue 开发规范 规范目的 命名规范 结构化规范 注释规范 编码规范 CSS 规范 规范目的 为提高团队协作效率 便于后台人员添加功能及前端后期优化维护 输出高质量的文档 命名规范 为了 ...

  4. 预测球队比赛结果及利用pyinstaller打包文件

    一.预测乒乓球球队比赛成绩 1.乒乓球比赛规则 一局比赛:在一局比赛中,先得11分的一方为胜方:10平后,先多得2分的一方为胜方. 一场比赛:单打的淘汰赛采用七局四胜制,双打淘汰赛和团体赛采用五局三胜 ...

  5. flutter在2019年会有怎样的表现?

    2019独角兽企业重金招聘Python工程师标准>>> Flutter的趋势 在移动端,受成本和效率的驱使,跨平台一站式开发慢慢成为一个趋势.从Hybird,RN,WEEX,Flut ...

  6. VR全景视图 Google VrPanoramaView

    2019独角兽企业重金招聘Python工程师标准>>> 一.背景简介 Welcome to VR at Google 进入Google VR主页,发现官方给我们提供了两套解决观看VR ...

  7. 用两张图告诉你,为什么你的App会卡顿?

    有什么料? 从这篇文章中你能获得这些料: 知道setContentView()之后发生了什么? 知道Android究竟是如何在屏幕上显示我们期望的画面的? 对Android的视图架构有整体把握. 学会 ...

  8. 批量将制定文件夹下的全部Excel文件导入微软SQL数据库

    以下代码将c:\cs\文件夹下的全部Excle中数据导入到SQL数据库 declare @query vARCHAR(1000) declare @max1 int declare @count1 i ...

  9. 信息竞赛进阶指南--KMP算法(模板)

    next[1] = 0; for (int i = 2, j = 0; i <= n; i++) { while (j > 0 && a[i] != a[j+1]) j = ...

  10. 图论--差分约束--POJ 1201 Intervals

    Intervals Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 30971 Accepted: 11990 Descripti ...