方法一:

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. 自定义Nuget包的技巧一二

    背景: 在项目中, 通常会拆分成核心库(Core)和应用(App)两个部分.核心库由专人维护, 不同的App是不同的团队,但都引用了核心库.当核心库需要升级更新时,有的应用会更新,有的不会--可能是没 ...

  2. Linux 中的 AutoHotKey 键映射替代方案

    1. Windows 之 AutoHotKey 初次了解AutoHotKey,是在Win 下最爱效率神器:AutoHotKey | 晚晴幽草轩这篇博客中,博主有对AutoHotKey作详细介绍,这里不 ...

  3. 跟我一起学 Go 系列:gRPC 拦截器

    Go gRPC 学习系列: 跟我一起学Go系列:gRPC 入门必备 第一篇内容我们已经基本了解到 gRPC 如何使用 .对应的三种流模式.现在已经可以让服务端和客户端互相发送消息.本篇仍然讲解功能性的 ...

  4. layui--入门(helloWorld)

    具体可参考官方文档:https://www.layui.com/doc/ 由于引入layui 需要用到node.js 安装过程可参考: https://www.cnblogs.com/liuchenx ...

  5. 视图:DBA_TAB_PARTITIONS 分区表视图

    Column Datatype 释义 Description TABLE_OWNER VARCHAR2(128) 表的owner Owner of the table TABLE_NAME VARCH ...

  6. C语言:位运算加密

    数据加密解密是一个常用的功能,如果你不希望让别人看到文件中的内容,可以通过密钥(也称"密码")将文件的内容加密.比如文本文件(.txt),加密前的内容是能够读懂的,加密后的内容是& ...

  7. python 实时监控剪切板,并替换其中的部分内容,重新写入剪切板

    #实时监控剪贴板内容的变化,并替换其中的回车,换行,逗号,再写入剪切板,以供使用. import pyperclip import time last_string = pyperclip.paste ...

  8. 家庭账本开发day03

    今天在编写form表单提交时遇到很多问题,在向servlet提交请求时找不到资源, 在网上查找学习了相关的信息,找到原因,添加注解或者配置xml文件的相关映射 解决问题.成功完成了账单添加的功能.

  9. LeetCode 847. Shortest Path Visiting All Nodes

    题目链接:https://leetcode.com/problems/shortest-path-visiting-all-nodes/ 题意:已知一条无向图,问经过所有点的最短路径是多长,边权都为1 ...

  10. Junit测试用例配置Log4j

    用Junit测试非常方便,但有时我们想要看日志来方便排除,使用spring+log4j时,用Junit测试看日志很多人都不太会,即如何将Junit与log4j进行整合. 我也是研究了半天,才终于找到了 ...