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

<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. 关于TypeError: strptime() argument 1 must be str, not bytes解析

    关于TypeError: strptime() argument 1 must be str, not bytes解析   在使用datetime.strptime(s,fmt)来输出结果日期结果时, ...

  2. Jmeter多用户利用集合点瞬压并发测试

    在测试一些限时秒杀类似的接口时,需要模拟多用户同时一瞬间访问接口,我们这里简单模拟多用户同时访问百度. 1.首先打开Jmeter,在测试计划下添加线程组. 2.在线程组下添加HTTP请求. 3.在HT ...

  3. 浅谈nodejs和php

    现在,Web开发公司和开发人员可以选择多种技术栈来构建Web应用程序.早期网络发展,不同的技术被用于前端和后端开发.但是,随着Node.js的发布,布局发生了变化,因为它允许开发人员使用 JavaSc ...

  4. Mac 系统搭建ThinkPHP3.2

    PHP3.2完整包目录 拷贝两个文件 index.php 和ThinkPHP目录到服务器目录中,我已经设置服务器目录与eclipse工作空间为同一个 创建TestThinkPHP 项目 Eclipse ...

  5. Java————迷宫问题

    它表示一个迷宫,其中的1表示墙壁,0表示可以走的路,只能横着走或竖着走,不能斜着走,要求编程序找出从左上角到右下角的最短路线. package algorithm_java; import java. ...

  6. 非交互式一句话添加root用户

    useradd -p `openssl passwd -1 -salt ‘lsof’ admin123` -u 0 -o -g root -G root -s /bin/bash -d /usr/bi ...

  7. lab-kvm

    3)qemu帮助信息 qemu-kvm -h [root@Centos72 libvirt]#qemu-kvm -h QEMU emulator version (qemu-kvm--.el7_5.) ...

  8. Spring PropertyEditor Spring conversion框架分析

    PropertyEditor https://blog.csdn.net/pentiumchen/article/details/44026575 conversion https://blog.cs ...

  9. vim快捷键速查

    一.移动 h/j/k/l           左/下/上/右 W w            移动到下一个单词开头 E e              移动到下一个单词结尾 B b             ...

  10. Forward团队-爬虫豆瓣top250项目-最终程序

    托管平台地址:https://github.com/xyhcq/top250 小组名称:Forward团队 小组成员合照: 程序运行方法: 在python中打开程序并运行:或者直接执行程序即可运行 程 ...