<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. 洛谷——P1505 苹果摘陶陶

    题目背景 根据2005年的Noip普及组第一题衍生出的一题. 但是有一点点的恶搞成分在里面..... 题目描述 话说去年苹果们被陶陶摘下来后都很生气,于是就用最先进的克隆技术把陶陶克隆了好多份> ...

  2. 洛谷 P1186 玛丽卡

    P1186 玛丽卡 题目描述 麦克找了个新女朋友,玛丽卡对他非常恼火并伺机报复. 因为她和他们不住在同一个城市,因此她开始准备她的长途旅行. 在这个国家中每两个城市之间最多只有一条路相通,并且我们知道 ...

  3. Spring MVC-表单(Form)标签-文件上传(File Upload)示例(转载实践)

    以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_upload.htm 说明:示例基于Spring MVC 4.1.6. 以下示例显 ...

  4. 一次MySQL(INNODB存储引擎) 死锁捉虫记

    前言 任何系统不管在什么阶段都需要关注生产环境错误日志,最近几个月内,发现偶尔会出现数据库死锁情况.以前碰到的数据库类错误大部分是SQL语法造成的错误,来到新东家之后才第一次碰到死锁情况,以前是搞游戏 ...

  5. [Vue] Lazy Load a Route by using the Dynamic Import in Vue.js

    By default, vue-router doesn’t lazy load the routes unless you tell it to do it. Lazy loading of the ...

  6. [Angulalr] Speed Up Reducer Development Using Ngrx Schematics

    When we use NGRX, we need to create some bolipates. Now with Angulalr6, we can use CLI to generate t ...

  7. 分享微软官方Demo用的SharePoint 2010, Exchange 2010, Lync 2010虚拟机

    微软官方有一套专门用于SharePoint 2010, Exchange 2010 Demo的虚拟机:SharePoint 2010: Information Worker Demonstration ...

  8. 一条SQL语句求全年平均值

    一年有8760个小时!(才这么点...) 有个气候表,存储了当地从1到8760小时的温度数据.现在,要求全年的温度每天平均值. CREATE TABLE #Climate(h INT ,t DECIM ...

  9. jQuery - 广告图片轮播切换

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  10. 【bzoj2038】[2009国家集训队]小Z的袜子(hose)(细致总结)

    [bzoj2038][2009国家集训队]小Z的袜子(hose)(细致总结) Description 作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色的袜子中找出一双来穿.终于有一天,小Z ...