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

<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. python第三天基础之字符编码

    一 了解字符编码的知识储备 1. 文本编辑器存取文件的原理(nodepad++,pycharm,word) 打开编辑器就打开了启动了一个进程,是在内存中的,所以在编辑器编写的内容也都是存放与内存中的, ...

  2. 第52章:Java操作MongoDB-[Mongo-Java-3.x]

    ①范例:连接数据库 package cn.mldn; import com.mongodb.MongoClient; import com.mongodb.MongoClientURI; import ...

  3. git遇到的问题-- Another git process seems to be running in this repository

    执行git add .时,报错 fatal: Unable to create '/Users/lily/ForWork/forReBaomai/bm-fe/.git/index.lock': Fil ...

  4. SpringCloud-分布式配置中心(基于SpringBoot2.X)

    一.配置中心的作用:可以将多种应用的配置进行集中式的管理,将这些配置统一存放到git或svn里面存储: 二.搭建SpringCloud-Config-Server 2.1如图后续步骤勾选Config ...

  5. Maths | 层次分析法(Analytic Hierarchy Process)

    目录 1. 概述 2. AHP算法 2.1. 建立层级 2.2. 构造 成对 比较 矩阵 2.3. 成对比较矩阵的 一致性检验 与 层次单排序 2.4. 层次总排序 参考: (中文)https://z ...

  6. 你可能不知道的web api

    简介 作为前端工作者,我们的工作与web是分不开的,随着HTML5的日益壮大,浏览器自带的webapi也随着增多.本篇文章主要选取了几个有趣且有用的webapi进行介绍,分别介绍其用法.用处以及浏览器 ...

  7. retrofit+rxjava封装

    public class RetrofitHelper { private static OkHttpClient okHttpClient; private static ServiceAPI se ...

  8. roadhog如何支持除development和production外的其他环境变量配置

    roadhog的build和start脚本分别对应了env/development和production,但实践中存在第三种开发环境(可能是预发或集成测试),配置和前两种也都不一样,但现在似乎没办法支 ...

  9. XML学习总结二——DTD

    主要用处是约束XML. 1.DTD分为内部DTD与外部DTD两类: 内部DTD:将DTD定义在XML文档的内部 <!DOCTYPE  根元素名  [    元素描述]> 外部DTD < ...

  10. unigui ShowModal、MessageDlg

    procedure Calback(Sender: TComponent; AResult: Integer);procedure TForm.Calback(Sender: TComponent; ...