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

<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. shell脚本:备份数据库、代码上线

    备份MySQL数据库场景:一台MySQL服务器,跑着5个数据库,在没有做主从的情况下,需要对这5个库进行备份 需求:1)每天备份一次,需要备份所有的库2)把备份数据存放到/data/backup/下3 ...

  2. Thymeleaf入门入门入门入门入门入门入门入门入门入门入门

    Thymeleaf 官网部分翻译:反正就是各种好 Thymeleaf是用来开发Web和独立环境项目的服务器端的Java模版引擎 Spring官方支持的服务的渲染模板中,并不包含jsp.而是Thymel ...

  3. JVM致命错误日志详解

    目录 文件描述 文件位置 文件头 错误信息记录 JVM运行信息 崩溃原因 错误信息 线程描述 线程信息 信号信息 计数器信息 机器指令 内存映射信息 线程堆栈 其他信息 进程描述 线程列表 虚拟机状态 ...

  4. Windows 计划任务 如果选择未登录就运行 则看不到GUI

    You can specify that a task should run even if the account under which the task is scheduled to run ...

  5. hdu_2570 迷障 贪心

    迷瘴 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submissi ...

  6. Jenkins 构建 Jmeter 项目

    1.启动 Jenkins(windows 版本) 2.新建自由风格的项目 定时任务 构建操作 安装 HTML Publisher 插件 构建后操作 最后保存构建,查看报告

  7. linux下编译boost的多线程程序

    linux下面用boost库进行多线程编程,一开始总是编译不成功,花了好多的时间. 下面是一段小示例代码: //start from the very beginning,and to create ...

  8. 题目分享Y

    题意:给出一个n个点n条边的图且不一定连通(原题面为每个节点出度为1),相邻节点不能同时被选,每个节点有其对应价值,求最多能获得多少价值?n<=1e6,val[i]<=1e6 分析:很容易 ...

  9. 《C程序设计语言》 练习2-1

    问题描述 编写一个程序以确定分别由signed及unsigned限定的char.short.int及long类型变量的取值范围.采用打印标准头文件中的相应值以及直接计算两种方式实现 Write a p ...

  10. 麦基数(p1045)

    描述: \(计算2^{P}−1的位数和最后500位数字(用十进制高精度数表示)\) Ⅰ.求位数 \(因为2^p最后一位必定不为0,求2^p-1的位数也就是求2^p位数\) \(2^p的位数确实很难求, ...