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 ...
随机推荐
- PG TO Oracle 增量同步-外部表
背景 最近在负责公司数据Oracle转PG:老平台数据库:Oracle11g:新平台数据库:PostgreSQL12.由于平台统计规则有变动:所以正在推广的游戏数据无法全部迁移过来:只能在老平台上运行 ...
- php 推荐密码加密的方法
password_hash() 函数 password_hash() 函数用于创建密码的散列(hash) PASSWORD_DEFAULT - 使用 bcrypt 算法 (PHP 5.5.0 默认). ...
- MarkDown排版测试
1.标题设置 标题(大标题) 标题(小标题) 标题(一级标题) 标题( 二级标题) 标题(三级标题) 标题(四级标题) 备注:大标题与一级标题一样,小标题与二级标题一样,"#"前无 ...
- 2019-2020-1 20199303《Linux内核原理与分析》第五周作业
系统调用的三层机制 API:第一层是指Libc中定义的API,这些API封装了系统调用,使用int 0x80触发一个系统调用中断:当然,并非所有的API都使用了系统调用,如完成数学加减运算的API就没 ...
- 2019-2020-1 20199329《Linux内核原理与分析》第十三周作业
<Linux内核原理与分析>第十三周作业 一.本周内容概述 通过重现缓冲区溢出攻击来理解漏洞 二.本周学习内容 1.实验简介 注意:实验中命令在 xfce 终端中输入,前面有 $ 的内容为 ...
- Android | 教你如何使用HwCameraKit接入相机人像模式
目录 介绍 简介 关于本次CodeLab 你将建立什么 你会学到什么 你需要什么 申请Camera相关权限 集成HwCameraKit开放能力 步骤1 模式创建:获取CameraKit实例,创建人像模 ...
- BigDecimal 01 - 在JAVA中怎么比较Double类型数据的大小?
2019独角兽企业重金招聘Python工程师标准>>> 非整型数,运算由于精度问题,可能会有误差,建议使用BigDecimal类型! double a = 0.001; doub ...
- vue elementui table 双击单元格实现编辑,聚焦,失去焦点,显示隐藏input和span
<el-table :data="tableData" class="tb-edit" style="width: 100%" ref ...
- Web全栈AngularJS
百度云盘下载 AngularJS是人类首个大规模使用的MVC框架,能够帮助程序员将绝大部分精力集中在核心业务逻辑上,从而大幅提高开发效率. 阶段2:Controller Controller是Angu ...
- 算法竞赛进阶指南--lowbit运算,找到二进制下所有是1的位
// lowbit运算,找到二进制下所有是1的位 int H[37]; // 预处理 for (int i = 0; i < 36; i++) H[(1ll << i) % 37] ...