方法一:

router/index.js

  {
path: '/src/views/activitiesDetails',
name: activitiesDetails,
component: activitiesDetails,
meta: {
title: '精选活动'
}
},

index.vue

 detalis(id){
this.$router.push({
path: '/src/views/activitiesDetails',
query: {
id: id
}
})
},

 获取id

console.log(this.$route.query.id)

  

方法二:

window.location.href ="/src/views/activitiesDetails?id=" + id

  

 获取id

console.log(this.$route.query.id)

方法三:

  {
path: '/src/views/activitiesDetails/:id',
name: activitiesDetails,
component: activitiesDetails,
meta: {
title: '精选活动'
}
},

index.vue

detalis(id){
this.$router.push(`/src/views/activitiesDetails/${id}`) ;
},

获取id

mounted() {
console.log(this.$route.params.id);
}

  

写在最后:

每次整理一点点,每天进步一点点,️

vue 传参动态的更多相关文章

  1. vue传参页面刷新数据丢失问题

    在做vue的时候,经常会遇到组件之间数据的传递问题,通过params或者query传参,但是,当页面刷新的时候,数据会丢失,找不到数据.今天经过总结,解决了这个问题.通过了一下几种情况进行传值: 通过 ...

  2. Postman接口测试动态传参——动态获取token值

    上午刚学会jmeter动态传参,下午研究了下postman也知道怎么动态获取token了. 主要就是第1行和第2行代码,第3行加上是希望Test Results有个返回值,如果不加第3行运行成功后也看 ...

  3. vue传参方式

    //query传参,使用name跳转   this.$router.push({       name:'second',       query: {         queryId:'201808 ...

  4. vue传参子传父

    vue子传父用$emit实现 1.文件目录结构 2.parent父组件内容 <template> <div class="wrap"> <div> ...

  5. vue-router4 |name的作用|query传参|parmas传参|动态路由参数|命名视图|别名alias|前置路由守卫|路由过渡效果|滚动行为

    vue-router4 出现 No match found for location with path "/" #### router/index.ts文件 import { c ...

  6. vue传参

    <template> <ul> <li v-for="item in list" :key="item.id"> <b ...

  7. vue 传参props里面为什么要带type,还有default?

    这个是子组件啦 ,写type的意思是swiperDate传过来的数据类型是数组,default就是表示不传默认返回的[ ],空数组. 这种就是表示传的数据类型是number,不传默认是0.

  8. vue传参二

    <template> <ul> <li v-for="(value,key,index) in list" :key="index" ...

  9. Jmeter接口测试动态传参——动态获取token值

    先添加一个线程组,然后在线程组下添加HTTP Request 环境变量: 线程组下添加User Defined Variables 调用变量:${变量名} 添加结果树: 记录登录后的token: 获取 ...

随机推荐

  1. excel判断数据是否存在另一列中

    1.if(EXACT(A2,B2)=TRUE,"相同","不同"),A2,B2相同(字母区分大小写)则函数值true正确,反馈相同,反之返回不同.注:单元格值受 ...

  2. Windows10上基于Visual Studio Code安装Golang开发环境

    GoLang简介 Go编程语言是一个开源项目,它使程序员更具生产力. Go语言具有很强的表达能力,它简洁.清晰而高效.得益于其并发机制,用它编写的程序能够非常有效地利用多核与联网的计算机,其新颖的类型 ...

  3. QQ邮箱获取授权码方法

    1.登录QQ邮箱,点击"设置" 2.点击"账户" 3.开启POP3/SMTP服务 4.点击"生成授权码" 5.完成验证后,即可生成授权码 P ...

  4. CSS水平居中与垂直居中的方法

    一.水平居中 1.行内元素水平居中 在父元素里添加text-align:center即可.代码如下: <style> .container-1 { height: 50px; border ...

  5. Springboot:Springboot+Swagger2集成服务

    Swagger是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同样的速度来更新.文件的方法,参数和模型紧密集成到服务 ...

  6. rz上传文件报错:rpm Read Signature failed: sigh blob(1268): BAD, read returned 0

    上传文件报错: [root@www localdisk]# rpm -ivh cobbler* error: cobbler-2.8.4-4.el7.x86_64.rpm: rpm  Read  Si ...

  7. Java003-String字符串

    1.这两种定义有什么区别 /*** * 面试题:这两种定义方式有什么区别? * 如何证明? * @param args */ public static void main(String[] args ...

  8. shell编程之循环语句for / while / until

    shell编程之循环语句与函数 一.条件测试 二.循环语句 ① for循环语句结构(遍历) 示例1 示例2 ② while循环语句结构(迭代) 示例1 示例2 ③ until 循环语句结构 示例1 一 ...

  9. 软件测试跟踪工具Bugzilla的安装 - Linux版本

    首先查看Linux当前版本 输入"uname -a ",可显示电脑以及操作系统的相关信息 输入"cat /proc/version",说明正在运行的内核版本 输 ...

  10. SuperEdge 易学易用系列-SuperEdge 简介

    关于 SuperEdge SuperEdge 是由腾讯.Intel.VMware.虎牙直播.寒武纪.首都在线和美团等多家公司共同发起的边缘容器管理系统,它基于原生 Kubernetes.针对边缘计算和 ...