<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. POJ 3278 Catch That Cow(求助大佬)

    Catch That Cow Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 109702   Accepted: 34255 ...

  2. springmvc 解析xml数据

    springmvc 解析xml数据 http://blog.csdn.net/zhi_jun/article/details/37925475

  3. java 基础编程day1

    public class TextCharType{ public static void(Sting[] args){ char c1 = 'a'; char c2 = '了'; System.ou ...

  4. Thrift源代码分析(八)--总结加一个完整的可执行的Thrift样例

    前面七篇文章分析了Thrfit的方方面面,看到这里时应该对Thrift有了深入的理解. Thrift源代码分析(一)-- 基本概念 Thrift源代码分析(二)-- 协议和编解码 Thrift源代码分 ...

  5. cocos2d-x 3.2 之 2048 —— 第二篇

    ***************************************转载请注明出处:http://blog.csdn.net/lttree************************** ...

  6. luogu2765 魔术球问题 网络流

    题目大意: 假设有n根柱子,现要按下述规则在这n根柱子中依次放入编号为1,2,3,...的球.(1)每次只能在某根柱子的最上面放球.(2)在同一根柱子中,任何2个相邻球的编号之和为完全平方数.试设计一 ...

  7. Vim 复制粘贴探秘

    Vim作为最好用的文本编辑器之一,使用vim来编文档,写代码实在是很惬意的事情.每当学会了vim的一个新功能,就会很大地提高工作效率.有人使用vim几十年,还没有完全掌握vim的功能,这也说明了vim ...

  8. 虚拟机中的ip和本机的ip不是一个网段的

    将虚拟机的网络适配器 模式改为桥接模式 然后就会和主机处于同一个网段了

  9. 【POJ 3322】 Bloxorz I

    [题目链接] http://poj.org/problem?id=3322 [算法] 广度优先搜索 [代码] #include <algorithm> #include <bitse ...

  10. MySQL 的单表查询

    单表查询 语法: 一.单表查询的语法 SELECT 字段1,字段2 ,...FROM 表名 WHERE 条件 GROUP BY field HAVING 筛选 ORDER BY filed LIMIT ...