方法一:

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. 铂金07:整齐划一-CountDownLatch如何协调多线程的开始和结束

    欢迎来到<并发王者课>,本文是该系列文章中的第20篇. 在上一篇文章中,我们介绍了Condition的用法.在本文中,将为你介绍CountDownLatch的用法.CountDownLat ...

  2. excel函数提取身份证出生日期,分离日期时间的日期和时间

    1.提取身份证出生日期 =1*TEXT(MID(H13,7,8),"0-00-00")用MID函数提取表示日期的位数,再用text函数转换为格式1998-6-21格式的文本,再通过 ...

  3. 对ES6中类class以及实例对象、原型对象、原型链之间关系的详细总结

    1. 类 ES6 中新增加了类的概念,可以使用 class 关键字声明一个类,之后用这个类来实例化对象.即类的用途:实例化对象. // 创建一个Person类 class Person { } // ...

  4. 富文本编辑器之游戏角色升级ing

    一.前言 想必大家看到这个标题,心中不禁会浮现几个问题: 什么是富文本编辑器? 富文本编辑器和游戏角色有什么关系? 为什么是升级ing? 什么是富文本编辑器--富文本编辑器集成了格式设置.媒体嵌入.社 ...

  5. 互联网巨头们的 SRE 运维实践「GitHub 热点速览 v.21.27」

    作者:HelloGitHub-小鱼干 本周大热点无疑是前几天 GitHub 发布的 Copilot,帮你补全代码,给你的注释提出建议,预测你即将使用的代码组件-如此神奇的 AI 技术,恰巧本周微软也开 ...

  6. 30、css介绍

    30.1.css概述: css是Cascading Style Sheet的简称,中文称为层叠样式表,是用来控制网页数据表现的,可以 使网页的表现与数据内容分离: 30.2.css的四种引入方式: 1 ...

  7. Go:go程序报错Cannot run program "C:\Users\dell\AppData\Local\Temp\___go_build_hello_go.exe" (in directory "…………"):该版本的 %1 与你运行的 Windows 版本不兼容。

    问题截图 在go语言编译的时候,如果只是单单编译一个文件的话,package必须是main,意味着是可以单独编译的. 解决办法 修改为 package main 就可以 再次运行就可以啦. 文章转载至 ...

  8. AOP面向切面的实现

    AOP(Aspect Orient Programming),我们一般称为面向方面(切面)编程,作为面向对象的一种补充,用于处理系统中分布于各个模块的横切关注点,比如事务管理.日志.缓存等等. AOP ...

  9. OpenMVG 系列 (2):Image 和 Numeric

    OpenMVG 的功能模块由若干核心库组成,本文主要介绍 Image 和 Numeric 两个库 1  Image Image 库包含图像容器 Image<T>.图像IO读写函数 Read ...

  10. ffiddler抓取手机(app)https包

    很多同学有看过原文,但是按照原文还是没有设置成功(我就是其中一个)然后查了网上资料,在某些选项上进行增加,填写,配置通过.(和原文略有不同) 安装Fiddler,我们正常的流程在feiddler中设置 ...