<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. PDF在线预览-pdfjs使用

    请参考我的开源: https://github.com/wuyechun2018/itools/blob/master/src/main/webapp/WEB-INF/views/pdf/index. ...

  2. OpenCV使用GPU

    在使用OpenCV2.4.x的时候,以为不用重新编译可以直接使用GPU模块,不过在我使用的时候,发现使用getCudaEnabledDeviceCount()的时候,总是获得是0,于是重新编译Open ...

  3. Codeforces Round #305 (Div. 2) C题 (数论)

    C. Mike and Frog time limit per test 1 second memory limit per test 256 megabytes input standard inp ...

  4. Spring 新手教程(三) 注入和自己主动装配

         Spring注入是指在启动Spring容器载入bean配置的时候.对类变量的赋值. 两种经常使用注入方式:设值注入和构造注入 以下就这部分知识看代码以及代码中的注解: 1.首先看Spring ...

  5. 转:分布式事务之TCC服务设计和实现注意事项

    由公司微服务培训引起的一丢丢对TCC的好奇 原文:https://yq.aliyun.com/articles/609854 一.TCC简介 TCC是一种比较成熟的分布式事务解决方案,可用于解决跨库操 ...

  6. ScheduleJobFactory

    /* * file name: ScheduleJobFactory.java * copyright: Unis Cloud Information Technology Co., Ltd. Cop ...

  7. C# 文件的一些基本操作(转)//用C#读写ini配置文件

    C# 文件的一些基本操作 2009-07-19  来自:博客园  字体大小:[大 中 小] 摘要:介绍C#对文件的一些基本操作,读写等. using System;using System.IO;us ...

  8. python3+request接口自动化框架中自动发送邮件

    在上一篇中的自动化框架中没有放上自动发送测试结果到邮箱的功能,在这篇文章中在补一下,哈哈 1.上一篇的代码就不在一一介绍了,本篇只介绍发送邮件的功能代码 2.在public common 文件夹中创建 ...

  9. 【钓起来的tips系列】

    一.求n的阶乘: #include<bits/stdc++.h> using namespace std; int n; int jc(int k) { ); )*k; } /*int j ...

  10. Spark2.2,IDEA,Maven开发环境搭建附测试

    前言: 停滞了一段时间,现在要沉下心来学习点东西,出点货了. 本文没有JavaJDK ScalaSDK和 IDEA的安装过程,网络上会有很多文章介绍这个内容,因此这里就不再赘述. 一.在IDEA上安装 ...