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 ...
随机推荐
- [go]包和工程管理
一.系统环境变量 GOROOT 指定go的安装目录,win是在 C\Go\,Linux在 /usr/local/go下,如果不是默认的目录,则需要指定 GOROOT环境变量,否则不需要 GOPATH ...
- web.config 301
<?xml version="1.0" encoding="UTF-8"?> <configuration> <system.we ...
- MFC之动态调用自己写的类库中的类的成员方法
第一步:创建一个要调用的类库 如果是MFC程序使用,可以创建一个MFC的类库,不过依然可以创建一个win32类库.我所知道的,MFC的类库可以分为常规MFC DLL和MFC扩展DLL关于它们之间的区别 ...
- jQuery动态时钟
效果图: 引用的jQuery.js自己百度 代码: <!DOCTYPE html> <html> <head> <meta charset="utf ...
- 啃算法:归并排序及JavaScript实现
在学习归并排序之前,有必要了解分治法,因为归并排序正是应用了分治模式.(基本定义摘自<算法导论>) 一.分治法 1.思想: 将原问题分解为几个规模较小但类似于原问题的子问题,递归地求解这些 ...
- #Week6 Neural Networks : Representation
一.Non-linear Hypotheses 线性回归和逻辑回归在特征很多时,计算量会很大. 一个简单的三层神经网络模型: \[a_i^{(j)} = \text{"activation& ...
- python(运算符)
一.运算符 1.算数运算符 (1)加(+) 注意:字符串与整数之间不能进行相加,需要通过str()或int()进行转换数据类型 整数与整数相加 >>> 1 + 1 2 >> ...
- speedtest 测试服务器上传下载速度
下载speedtest.py wget https://raw.githubusercontent.com/sivel/speedtest-cli/master/speedtest.py 赋予执行权限 ...
- gVim配置文件分享
前言 直接可以把这个配置覆盖掉现在安装目录Vim底下的"_vimrc"文件 效果图 Code: set number set tabstop=4 set softtabstop=4 ...
- jenkins 安装成功之后配置
一.基础配置介绍 jenkins安装成功之后如果某些东西配置的话,可能部署的时候一堆的问题,所以单独总结一下,让大家少走弯路 二.准备工作 1.需要准备一台服务器,大家可以在网上买,个人学习的话还是建 ...