方法一:

router/index.js

  1. {
  2. path: '/src/views/activitiesDetails',
  3. name: activitiesDetails,
  4. component: activitiesDetails,
  5. meta: {
  6. title: '精选活动'
  7. }
  8. },

index.vue

  1. detalis(id){
  2. this.$router.push({
  3. path: '/src/views/activitiesDetails',
  4. query: {
  5. id: id
  6. }
  7. })
  8. },

 获取id

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

  

方法二:

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

  

 获取id

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

方法三:

  1. {
  2. path: '/src/views/activitiesDetails/:id',
  3. name: activitiesDetails,
  4. component: activitiesDetails,
  5. meta: {
  6. title: '精选活动'
  7. }
  8. },

index.vue

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

获取id

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

  

写在最后:

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

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. (先导)Git Api对接:获取private_token的两种方式

    " Git是一个开源的分布式版本控制系统,可以有效.高速地处理从很小到非常大的项目版本管理.在公司一般用于代码管理:开发用例管理平台时我们选择使用git来管理用例,期间使用了很多git ap ...

  2. 30、css介绍

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

  3. Pandas高级教程之:plot画图详解

    目录 简介 基础画图 其他图像 bar stacked bar barh Histograms box Area Scatter Hexagonal bin Pie 在画图中处理NaN数据 其他作图工 ...

  4. layui 点击按钮 界面会刷新问题

    将button 改为input: <input class="layui-btn" type="button" style="border:so ...

  5. keycloak~管理平台的查询bug与自定rest中文检索

    对于keycloak来说,它的管理平台在它的源码中的admin-client中,它会定义相关的rest接口规范:在我们使用keycloak管理平台时,其中有一个组的查询,在我们查询中文组时,它是不支持 ...

  6. Prometheus(一):Web服务环境监控

    写在前面 现每个后端的同学的日常都在跟服务(接口)打交道,维护老的比较大单体应用.按业务拆得相对比较细的新服务.无论企业内部用的,面向用户的前端的服务.流量大的有流量小的,有重要的有不那么重要的. 但 ...

  7. spring data jpa执行update和delete语句时报错处理

    之前项目中使用spring data jpa时,遇到删除记录的需求时,主要利用spring data中自带的delete()方法处理,最近在dao层使用delete sql语句时报错,代码如下: @Q ...

  8. 「BZOJ2839」集合计数

    「BZOJ2839」集合计数 题目大意: 一个包含 \(n\) 个数的集合有 \(2^n\) 个子集,从这些子集中取出若干个集合(至少一个),使他们的交集的元素个数恰好为 \(k\),求方案数,答案对 ...

  9. C++ 11 智能指针(shared_ptr)类成员函数详解

    C++ 11 模板库的 <memory> 头文件中定义的智能指针,即 shared_ptr 模板类,用来管理指针的存储,提供有限的内存回收函数,可同时与其他对象共享该管理功能. share ...

  10. C语言:printf*("%x")

    #include <stdio.h> int main(){ int a = 100; char str[20] = "hello world!"; char *zza ...