router-link传参
果然还好是一小部分一小部分记录的好。
<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传参的更多相关文章
- React Router路由传参方式总结
首先我们要知道一个前提,路由传递的参数我们可以通过props里面的属性来获取.只要组件是被<Router>组件的<component>定义和指派的,这个组件自然就有了props ...
- react router路由传参
今天,我们要讨论的是react router中Link传值的三种表现形式.分别为通过通配符传参.query传参和state传参. ps:进入正题前,先说明一下,以下的所有内容都是在react-rout ...
- vue中this.$router.push() 传参
1 params 传参 注意⚠️:patams传参 ,路径不能使用path 只能使用name,不然获取不到传的数据 this.$router.push({name: 'dispatch', para ...
- Vue的Router路由传参
一.文件结构 二.vue.js 打开此链接 https://cdn.bootcss.com/vue/2.6.10/vue.js 复制粘贴页面的所有内容 三.vue-router.js 打开此链接 h ...
- vue $router.push 传参的问题
$router 和 $route的区别 $route为当前router跳转对象里面可以获取name.path.query.params等 $router为VueRouter实例,想要导航到不同URL, ...
- vue router使用query和params传参的使用
传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,希望可以帮到大家. Vue ...
- (转)vue router 如何使用params query传参,以及有什么区别
写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞 ...
- 每日技术总结:vue router传参方式,js获取设备高度
今天貌似没什么问题,23333…… 1.vue router 路由传参的方式 应用情景:从分类页(category.vue)进入商品列表页(list.vue),需要传递商品分类id(catId),商品 ...
- vue router 如何使用params query传参,以及有什么区别
写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞 ...
- angular路由传参和获取路由参数的方法
1.首先是需要导入的模块 import { Router } from "@angular/router";//路由传参用到 import{ActivatedRoute,Param ...
随机推荐
- 负载均衡服务之HAProxy基础配置(五)
前文我们聊了下haproxy的修改报文首部的配置.压缩功能以及haproxy基于http协议自定义健康状态检测机制:回顾请参考https://www.cnblogs.com/qiuhom-1874/p ...
- PE文件学习(1)DOS和NT
大致结构 DOS头和NT头之间通常还有个DOS Stub DOS头 DOS头的作用是兼容MS-DOS操作系统中的可执行文件 一般没啥用 记录着PE头的位置 DOS头定义部分 typedef struc ...
- vue 开发规范
本文档为前端 vue 开发规范 规范目的 命名规范 结构化规范 注释规范 编码规范 CSS 规范 规范目的 为提高团队协作效率 便于后台人员添加功能及前端后期优化维护 输出高质量的文档 命名规范 为了 ...
- 预测球队比赛结果及利用pyinstaller打包文件
一.预测乒乓球球队比赛成绩 1.乒乓球比赛规则 一局比赛:在一局比赛中,先得11分的一方为胜方:10平后,先多得2分的一方为胜方. 一场比赛:单打的淘汰赛采用七局四胜制,双打淘汰赛和团体赛采用五局三胜 ...
- flutter在2019年会有怎样的表现?
2019独角兽企业重金招聘Python工程师标准>>> Flutter的趋势 在移动端,受成本和效率的驱使,跨平台一站式开发慢慢成为一个趋势.从Hybird,RN,WEEX,Flut ...
- VR全景视图 Google VrPanoramaView
2019独角兽企业重金招聘Python工程师标准>>> 一.背景简介 Welcome to VR at Google 进入Google VR主页,发现官方给我们提供了两套解决观看VR ...
- 用两张图告诉你,为什么你的App会卡顿?
有什么料? 从这篇文章中你能获得这些料: 知道setContentView()之后发生了什么? 知道Android究竟是如何在屏幕上显示我们期望的画面的? 对Android的视图架构有整体把握. 学会 ...
- 批量将制定文件夹下的全部Excel文件导入微软SQL数据库
以下代码将c:\cs\文件夹下的全部Excle中数据导入到SQL数据库 declare @query vARCHAR(1000) declare @max1 int declare @count1 i ...
- 信息竞赛进阶指南--KMP算法(模板)
next[1] = 0; for (int i = 2, j = 0; i <= n; i++) { while (j > 0 && a[i] != a[j+1]) j = ...
- 图论--差分约束--POJ 1201 Intervals
Intervals Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 30971 Accepted: 11990 Descripti ...