一般来说,可以通过查询字符串的方式将参数传过去,方法如下:

<router-link :to="{path:'/Detail', query:{ name: id }}"></router-link>

这里要非常注意一个问题,就是在to前面必需加冒号 : ,使其变成动态绑定属性的形式,后面的参数才能被正确解析,否则这堆东西将被视作一个字符串原封不动地传过去,这毫无意义。

  而在接收端,通过this.$route.query.name来获取这个id值。

  先搞这一种吧。

vue的router-link传参问题的更多相关文章

  1. Vue的Router路由传参

    一.文件结构 二.vue.js 打开此链接 https://cdn.bootcss.com/vue/2.6.10/vue.js 复制粘贴页面的所有内容 三.vue-router.js 打开此链接  h ...

  2. react router @4 和 vue路由 详解(六)vue怎么通过路由传参?

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 8.vue怎么通过路由传参? a.通配符传参数 //在定义路由的时候 { path: ' ...

  3. Vue中router两种传参方式

    Vue中router两种传参方式 1.Vue中router使用query传参 相关Html: <!DOCTYPE html> <html lang="en"> ...

  4. Vue的组件及传参

    目录 Vue的组件及传参 Vue组件的概念 根组件 子组件(局部组件) 父组件向子组件传值 子组件向父组件传值 Vue的组件及传参 Vue组件的概念 我们首先要知道组件的概念,实际上每一个组件都是一个 ...

  5. vue中this.$router.push() 传参

    1  params 传参 注意⚠️:patams传参 ,路径不能使用path 只能使用name,不然获取不到传的数据 this.$router.push({name: 'dispatch', para ...

  6. vue $router.push 传参的问题

    $router 和 $route的区别 $route为当前router跳转对象里面可以获取name.path.query.params等 $router为VueRouter实例,想要导航到不同URL, ...

  7. Vue.js中组件传参的方法 - 基于webpack模板

    在Vuejs中, 组件之间的传参是今天第一次接触, 之前写的组件互相之间都是独立的, 弗敢专也, 必以分人 环境: node.js npm vue-cli 以上安装请自行百度 一.项目创建 $ vue ...

  8. React Router路由传参方式总结

    首先我们要知道一个前提,路由传递的参数我们可以通过props里面的属性来获取.只要组件是被<Router>组件的<component>定义和指派的,这个组件自然就有了props ...

  9. react router路由传参

    今天,我们要讨论的是react router中Link传值的三种表现形式.分别为通过通配符传参.query传参和state传参. ps:进入正题前,先说明一下,以下的所有内容都是在react-rout ...

  10. vue 页面跳转传参

    页面之间的跳转传参,正常前端js里写 window.location.href="xxxxx?id=1" 就可以了: 但是vue不一样 需要操作的是路由history,需要用到 V ...

随机推荐

  1. 前端js收藏

    1 爱心特效 <script type="text/javascript"> (function(window,document,undefined){ var hea ...

  2. python 模块——os 模块

    os 模块--操作系统的各种接口 常用函数: os.path os.path.join(path,*paths) (常用,设置文件路径)将一个或者多个路径连接起来. PATH_TO_TEST_IMAG ...

  3. git的使用方式总结

    1.先用 git clone url 克隆下来项目 2.查看下载的项目里面有没有一个名字叫git的文件夹 3.用git branch查看当前所有的本地分支,绿色的代表当前所处的分支 4.若本地只有一个 ...

  4. eclipse遇到启动报an error has occurred see the log file错

    错误: 修改eclipse安装目录下比如D:\eclipse\configuration\.settings\org.eclipse.ui.ide.prefs, 删除 RECENT_WORKSPACE ...

  5. 今天我给你们推荐一本书《Linux就该这么学》!!!

    本书是由全国多名红帽架构师(RHCA)基于最新Linux系统共同编写的高质量Linux技术自学教程,极其适合用于Linux技术入门教程或讲课辅助教材,目前是国内最值得去读的Linux教材,也是最有价值 ...

  6. 利用canvas实现刮刮乐效果

    最近做了个情人节表白的项目,表白内容时被遮盖的,刮开后才能显示,并且刮开一定比例后清空所有遮罩. function guaguale(obj,w,h){//obj时canvas元素 var canva ...

  7. django中的modelform和modelfoemset

    一. ModelForm ModelForm是根据Model来定制的Form 二. ModelForm的创建 from django import forms from app import mode ...

  8. 第44章:MongoDB-集群--Sharding(分片)--分片的片键选择

    ①片键选择的重要性 所谓片键,就是用来拆分数据的字段,通常为1-2个字段,由于片键一旦确定,并已经分片过后,基本上就不可能再修改片键了,因此初期设计和选择就非常重要了 ②片键规则 1:不可以是数组 2 ...

  9. 【repost】Python正则表达式

    星光海豚   python正则表达式详解 正则表达式是一个很强大的字符串处理工具,几乎任何关于字符串的操作都可以使用正则表达式来完成,作为一个爬虫工作者,每天和字符串打交道,正则表达式更是不可或缺的技 ...

  10. 起步:Proteus 8 仿真 Arduino 1.8.2

    一.环境准备 1.从Arduino官网或中文社区下载并安装 Arduino IDE 当前最新版1.8.2:http://www.arduino.cn/thread-5838-1-1.html 2.下载 ...