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 ...
随机推荐
- shell脚本:备份数据库、代码上线
备份MySQL数据库场景:一台MySQL服务器,跑着5个数据库,在没有做主从的情况下,需要对这5个库进行备份 需求:1)每天备份一次,需要备份所有的库2)把备份数据存放到/data/backup/下3 ...
- Thymeleaf入门入门入门入门入门入门入门入门入门入门入门
Thymeleaf 官网部分翻译:反正就是各种好 Thymeleaf是用来开发Web和独立环境项目的服务器端的Java模版引擎 Spring官方支持的服务的渲染模板中,并不包含jsp.而是Thymel ...
- JVM致命错误日志详解
目录 文件描述 文件位置 文件头 错误信息记录 JVM运行信息 崩溃原因 错误信息 线程描述 线程信息 信号信息 计数器信息 机器指令 内存映射信息 线程堆栈 其他信息 进程描述 线程列表 虚拟机状态 ...
- Windows 计划任务 如果选择未登录就运行 则看不到GUI
You can specify that a task should run even if the account under which the task is scheduled to run ...
- hdu_2570 迷障 贪心
迷瘴 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submissi ...
- Jenkins 构建 Jmeter 项目
1.启动 Jenkins(windows 版本) 2.新建自由风格的项目 定时任务 构建操作 安装 HTML Publisher 插件 构建后操作 最后保存构建,查看报告
- linux下编译boost的多线程程序
linux下面用boost库进行多线程编程,一开始总是编译不成功,花了好多的时间. 下面是一段小示例代码: //start from the very beginning,and to create ...
- 题目分享Y
题意:给出一个n个点n条边的图且不一定连通(原题面为每个节点出度为1),相邻节点不能同时被选,每个节点有其对应价值,求最多能获得多少价值?n<=1e6,val[i]<=1e6 分析:很容易 ...
- 《C程序设计语言》 练习2-1
问题描述 编写一个程序以确定分别由signed及unsigned限定的char.short.int及long类型变量的取值范围.采用打印标准头文件中的相应值以及直接计算两种方式实现 Write a p ...
- 麦基数(p1045)
描述: \(计算2^{P}−1的位数和最后500位数字(用十进制高精度数表示)\) Ⅰ.求位数 \(因为2^p最后一位必定不为0,求2^p-1的位数也就是求2^p位数\) \(2^p的位数确实很难求, ...