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

<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. nginx常用服务配置

    一.nginx.conf的配置方式,创建新vhost user nginx; worker_processes ; worker_cpu_affinity ; worker_rlimit_nofile ...

  2. IntelliJ IDEA 控制台中文乱码解决方案

    配置Intellij的配置文件(在idea安装目录bin目录下) 打开Intellij的根目录,找到下图的两个文件(根据你的系统是32位或64位选择其中一个配置文件),在配置文件中添加: -Dfile ...

  3. js生成tree形组织机构下拉框

    1.首先我们正常数据是如下所示: [ { id: 1, pid: 0, name: '公司组织' }, { id: 2, pid: 1, name: '总经办' }, { id: 3, pid: 1, ...

  4. CentOS7 + Django2.1 + uwsgi + nginx配置

    假设已经可以运行Django项目,可以runserver.也已经安装了uwsgi和nginx 现在需要进行配置. 刚开始进行uwsgi测试就不行,提示bash:'uwsgi' Command not ...

  5. 2019.03.26 bzoj4446: [Scoi2015]小凸玩密室（树形dp）

    传送门 题意简述: 给一棵完全二叉树,有点权aia_iai​和边权,每个点有一盏灯,现在要按一定要求点亮: 任意时刻点亮的灯泡必须连通 点亮一个灯泡后必须先点亮其子树 费用计算如下:点第一盏灯不要花费 ...

  6. Github使用:使用github用作自己的免费域名

    1.创建一个新仓库 --- 删除里面的文件 --- Git上传文件到新仓库(必须有index.html) 2. 点击新仓库的setting,下滑找到GitHub Pages ---- 点击第一行的链接 ...

  7. Blueking bk 蓝鲸开发环境搭建

    首先根据文档安装各种东西 http://docs.bk.tencent.com/develop_center/ops/unified.html#installation 完后在在vagrantfile ...

  8. Tensoflow API笔记(N) 设备指定

        tf.device是tf.Graph.device()的一个包装,是一个用于指定新创建的操作(operation)的默认设备的环境管理器.参数为device_name_or_function, ...

  9. 洛谷P1725--琪露诺(单调队列)

    https://www.luogu.org/problemnew/show/P1725 关于滑动窗口的解释https://www.cnblogs.com/albert67/p/10449039.htm ...

  10. Navicat连接oracle库报错的处理方法

    1.oracle客户端版本:11.2.0  64X navicat premium客户端:12.0. 64X 2.安装后,打开连接,输入连接信息,点击保存,提示oracle library is no ...