<li v-for="article in articles" @click="getDescribe(article.id)">

getDescribe(id) {
// 直接调用$router.push 实现携带参数的跳转
this.$router.push({
path: `/describe/${id}`,
})
this.$route.params.id

父组件中:通过路由属性中的name来确定匹配的路由,通过params来传递参数。
this.$router.push({
name: 'Describe',
params: {
id: id
}
})
this.$route.params.id

父组件:使用path来匹配路由,然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=?
this.$router.push({
path: '/describe',
query: {
id: id
}
})
对应子组件: 这样来获取参数
this.$route.query.id

vue 路由跳转传参的更多相关文章

  1. vue路由跳转传参的两种方法

    路由跳转: this.$router.push({ name: '工单列表', params: {p_camera_dev_name: 'xxx'} }); 使二级菜单呈点击状态: $('[index ...

  2. vue路由跳转传参

    this.$router.push({ path: '/message/result_notice', query: { id: id } }) // let type = this.$route.n ...

  3. vue路由(一个包含重定向、嵌套路由、懒加载的main.js如下)and 路由跳转传参的query和params的异同

    import Vue from 'vue'import VueRouter from 'vue-router'import App from './App'Vue.use(VueRouter)cons ...

  4. vue 页面跳转传参

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

  5. Vue ---- 组件文件分析 组件生命周期钩子 路由 跳转 传参

    目录 Vue组件文件微微细剖 Vue组件生命周期钩子 Vue路由 1.touter下的index.js 2.路由重定向 3.路由传参数 补充:全局样式导入 路由跳转 1. router-view标签 ...

  6. Vue之路由跳转 传参 aixos 和cookie

    一.路由跳转 1.1 项目的初始化 vue create m-proj   >>>创建vue项目 精简vue项目的 views 视图   About(基本是删除的) Home.(可以 ...

  7. vue 中 this.$router.push() 路由跳转传参 及 参数接收的方法

    传递参数的方法:1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效.需要用name ...

  8. vue 路由跳转带参 方式query ,params

    a.vue向b.vue传值 a.vue this.$router.push({ path: '/payType', query: { putUpList: this.putUpList, name:' ...

  9. vue路由跳转传参数

    1. router-link <router-link :to="{ path: 'yourPath', params: { name: 'name', dataObj: data } ...

随机推荐

  1. 51Nod——T 1113 矩阵快速幂

    https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1113 基准时间限制:3 秒 空间限制:131072 KB 分值: 40 ...

  2. 固定一个div在浏览器底部

    转自原文 如何固定一个div在浏览器底部   方法1:使用CSS绝对定位 div{ position:absolute; bottom:0px; left:0px; } 方法2:使用CSS固定定位 d ...

  3. HDU 4532

    #include <iostream> #include <cstdio> #include <cstring> #include <algorithm> ...

  4. cppunit 单元测试程序

    原文:http://www.cnblogs.com/wang-kai/p/5106740.html 极限编程(XP)推崇测试优先原则,由此引发了软件开发方法从传统的瀑布模型转向以测试为驱动的敏捷开发模 ...

  5. [csdn markdown]使用摘记一源码高亮及图片上传和链接

    本文主要内容是体验csdn markdown的代码块高亮显示和图片链接及上传. 图片上传 上边这是标题行.仅仅须要使用一个#就能够表示.几个表示是几级标题 图片上传 本地图片上传控件 本地图片上传方式 ...

  6. 关于isset的一点说明

    作者:zhanhailiang 日期:2014-10-08 今天遇到一个非常奇怪的bug,測试例如以下: <? php $a = 'abc'; var_dump(isset($a['code'] ...

  7. 《Java编程思想》笔记

    第十章 (1)当生成一个内部类的对象时.此对象 与制造他的外围对象之间就有了一种联系,所以它能訪问其外围对象的全部成员,而不须要不论什么特殊条件. 此外,内部类还拥有其它外围类的全部元素的訪问权. ( ...

  8. oc62--block1

    // // main.m // Block的应用场景 // typedef void (^workBlock)(); #import <Foundation/Foundation.h> / ...

  9. Microsoft ASP.NET SignalR

    SignalR类似与JavaScript实时框架,如Socket.IO.SignalR能够完成客户端向服务器的异步通信,并同时支持服务器向浏览器客户端推送事件.SignalR的连接通过日益流行的Web ...

  10. Wireshark抓取RTP包,还原语音

    最近在做基于SIP的VoIP通信研究,使用Wireshark软件可以对网络流量进行抓包. VoIP使用RTP协议对语音数据进行传输,语音载荷都封装在RTP包里面.要对传输中的语音进行截获和还原,需要通 ...