vue的router-link传参问题
一般来说,可以通过查询字符串的方式将参数传过去,方法如下:
<router-link :to="{path:'/Detail', query:{ name: id }}"></router-link>
这里要非常注意一个问题,就是在to前面必需加冒号 : ,使其变成动态绑定属性的形式,后面的参数才能被正确解析,否则这堆东西将被视作一个字符串原封不动地传过去,这毫无意义。
而在接收端,通过this.$route.query.name来获取这个id值。
先搞这一种吧。
vue的router-link传参问题的更多相关文章
- Vue的Router路由传参
一.文件结构 二.vue.js 打开此链接 https://cdn.bootcss.com/vue/2.6.10/vue.js 复制粘贴页面的所有内容 三.vue-router.js 打开此链接 h ...
- react router @4 和 vue路由 详解(六)vue怎么通过路由传参?
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 8.vue怎么通过路由传参? a.通配符传参数 //在定义路由的时候 { path: ' ...
- Vue中router两种传参方式
Vue中router两种传参方式 1.Vue中router使用query传参 相关Html: <!DOCTYPE html> <html lang="en"> ...
- Vue的组件及传参
目录 Vue的组件及传参 Vue组件的概念 根组件 子组件(局部组件) 父组件向子组件传值 子组件向父组件传值 Vue的组件及传参 Vue组件的概念 我们首先要知道组件的概念,实际上每一个组件都是一个 ...
- vue中this.$router.push() 传参
1 params 传参 注意⚠️:patams传参 ,路径不能使用path 只能使用name,不然获取不到传的数据 this.$router.push({name: 'dispatch', para ...
- vue $router.push 传参的问题
$router 和 $route的区别 $route为当前router跳转对象里面可以获取name.path.query.params等 $router为VueRouter实例,想要导航到不同URL, ...
- Vue.js中组件传参的方法 - 基于webpack模板
在Vuejs中, 组件之间的传参是今天第一次接触, 之前写的组件互相之间都是独立的, 弗敢专也, 必以分人 环境: node.js npm vue-cli 以上安装请自行百度 一.项目创建 $ vue ...
- React Router路由传参方式总结
首先我们要知道一个前提,路由传递的参数我们可以通过props里面的属性来获取.只要组件是被<Router>组件的<component>定义和指派的,这个组件自然就有了props ...
- react router路由传参
今天,我们要讨论的是react router中Link传值的三种表现形式.分别为通过通配符传参.query传参和state传参. ps:进入正题前,先说明一下,以下的所有内容都是在react-rout ...
- vue 页面跳转传参
页面之间的跳转传参,正常前端js里写 window.location.href="xxxxx?id=1" 就可以了: 但是vue不一样 需要操作的是路由history,需要用到 V ...
随机推荐
- Jmeter多用户利用集合点瞬压并发测试
在测试一些限时秒杀类似的接口时,需要模拟多用户同时一瞬间访问接口,我们这里简单模拟多用户同时访问百度. 1.首先打开Jmeter,在测试计划下添加线程组. 2.在线程组下添加HTTP请求. 3.在HT ...
- Windows多线程学习随笔
自学Windows多线程知识,例程如下: #include <iostream> #include <windows.h> #include <process.h> ...
- Github使用:使用github用作自己的免费域名
1.创建一个新仓库 --- 删除里面的文件 --- Git上传文件到新仓库(必须有index.html) 2. 点击新仓库的setting,下滑找到GitHub Pages ---- 点击第一行的链接 ...
- JavaScript基础视频教程总结(111-120章)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- Codeforces Codeforces Round #484 (Div. 2) D. Shark
Codeforces Codeforces Round #484 (Div. 2) D. Shark 题目连接: http://codeforces.com/contest/982/problem/D ...
- The META for Mobile terminal
近来想写一些好玩的手机网页,在这里整理了一下在手机端的meta标签,以免下次忘记,再去网上搜. meta指元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描 ...
- eclipse新建的项目,也添加到tomcat上了,地址栏访问的时候就是访问不到。。。怎么办
其实是可以访问的,目前我遇到以下两种可能出现这种现象的原因: 1.这个项目在你写的过程中改了名字,这样你访问改后的名字是不行的,需要在下图,也就是server服务器的server.xml文件中修改访问 ...
- html或者jsp页面刷新问题
setTimeout(function(){window.location.reload();//刷新当前页面.},2000) window.location.reload();//刷新当前页面.pa ...
- 打开xmind 8 输入序列号
XAka34A2rVRYJ4XBIU35UZMUEEF64CMMIYZCK2FZZUQNODEKUHGJLFMSLIQMQUCUBXRENLK6NZL37JXP4PZXQFILMQ2RG5R7G4QN ...
- python Descriptor (描述符)
简介: python 描述符是新式类(继承自object)中的语言协议,基于描述符可以提供更佳优雅的解决方案. python的classmethod, staticmethod, property都是 ...