<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. ZooKeeper的应用场景(转)

    应用场景1 :统一命名服务 分布式应用中,通常需要一套完备的命令机制,既能产生唯一的标识,又方便人识别和记忆. 我们知道,每个ZNode都可以由其路径唯一标识,路径本身也比较简洁直观,另外ZNode上 ...

  2. 猫猫学iOS之UILabel设置圆角不成功所做调控更改

    原创文章.欢迎转载.转载请注明:翟乃玉的博客 地址:http://blog.csdn.net/u013357243 如图问题 如图是我要做的效果 然而当我写好代码后,设置号label的layer圆角后 ...

  3. Win8.1下COCOS2D-X 3.4环境搭建

     Cocos2dx_3.4开发环境搭建,并编译成APK 第一步:须要下载的:(windows64位系统下环境搭建) Ant   apache-ant-1.9.4-bin.zip NDK   and ...

  4. 【Unity3D】 KeyCode 键码

    Key codes returned by Event.keyCode. These map directly to a physical key on the keyboard. KeyCode是由 ...

  5. runloop简单介绍

    runloop是iOS底层机制中保持我们的程序一直运行的机制.他可以让线程一直循环不退出.而在我们正常的编程中.线程其实是线性的,当线程处理完我们的代码以后就自动退出了.runloop就是保证我们的应 ...

  6. 关于MFC控件删除出现“具有该ID的控件已存在”这样的情况的解决方案,详细,网上都没有这么详细的,我是“深受其害”,所以想将详细的方法分享出去。

    网上关于MFC控件删除出现“具有该ID的控件已存在”这样的情况,在网上找了很多关于这方面的东西,但是都不是很全,也不容易弄明白.现在问我直接通过一个项目和图片的形式和大家一块分享一个这个解决方法(如有 ...

  7. hdu 3037Saving Beans(卢卡斯定理)

    Saving Beans Saving Beans Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Jav ...

  8. javascript从作用域链的角度看闭包

    闭包 闭包是一个能访问外部函数定义的变量的函数. 为什么? 当访问一个变量时,解释器会首先在当前作用域查找标示符,如果没有找到,就去父作用域找,直到找到该变量的标示符或者不再存在父作用域了,这就是作用 ...

  9. JavaScript在表格中模拟搜索多关键词搜索和筛选

    模拟搜索需要实现以下功能: 1.用户的模糊搜索不区分大小写,需要小写字母匹配同样可以匹配到该字母的大写单词. 2.多关键词模糊搜索,假设用户关键词以空格分隔,在关键词不完整的情况下仍然可以匹配到包含该 ...

  10. JavaScript学习二

    2019-05-30 15:08:24 加油,这几天在赶高数,都…… <!DOCTYPE html> <html> <head> <script type=& ...