ant design vue 实现带参跳转页面

简介: ant design vue 实现带参跳转页面


功能描述

点击A页面时,跳转到B页面,并在地址中传递参数。

实现思路

A页面中添加@Click事件,进行跳转,我是多个按钮同时调用一个方法,使用传递参数的方式进行区分。

代码实现

A页面代码

在你需要跳转的地方添加@Click事件,传递参数区分哪里进行调用的。

<a-col :md="6" @click="PageJump(3)">
        <div class="content">
          <div class="title">按钮</div>
          <img class="img" src='../../assets/jiandang.png'>
        </div>
      </a-col>
      <a-col :md="6" @click="PageJump(0)">
        <div class="content">
          <div class="title">按钮</div>
          <img src='../../assets/gaoxueya.png'>
        </div>
      </a-col>

JS代码

PageJump(sid) {
      this.$router.push({
          path: '/xxxx/xxxx?type='+sid,
        })
    },

B页面

activated 每次进入到B页面是都会走这个方法,这是他和created()方法的区别,我这边是获取到参数后直接赋值给了查询对象queryParam,然后调用查询方法,请求后台,返回数据。

activated() {
    console.log('接收到的参数', this.$route.query.type)
    //获取路径中的参数
    this.queryParam.threeTag=this.$route.query.type;
    this.loadData()
  },

结束语

这就是整个的实现带参调转页面,不懂得可以私信!!!

目录
相关文章
|
2天前
|
JavaScript
|
1天前
|
存储 缓存 JavaScript
vue代码优化方案
【7月更文挑战第13天】 **Vue.js 优化要点:** 分解大组件以提高复用性和加载速度;利用计算属性与侦听器优化数据处理;使用Object.freeze()减少响应式数据;借助Vuex或Composition API管理状态;实现虚拟滚动和无限加载提升长列表性能;路由懒加载减少初始加载时间;用Vue DevTools检测性能瓶颈;定期代码审查与重构;应用缓存策略;遵循最佳实践与团队规范,提升应用整体质量。
10 2
|
4天前
|
JavaScript 前端开发
【vue】 el-table解决分页不能筛选全部数据的问题
【vue】 el-table解决分页不能筛选全部数据的问题
15 4
|
4天前
|
JavaScript
【vue】 vue2 监听滚动条滚动事件
【vue】 vue2 监听滚动条滚动事件
10 1
|
4天前
|
编解码 前端开发
【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
11 0
|
4天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
14 6
|
4天前
|
JavaScript 定位技术
【天地图】vue 天地图 T is not defined
【天地图】vue 天地图 T is not defined
14 1
|
9天前
|
数据采集 JavaScript 前端开发
Vue框架的优缺点是什么
【7月更文挑战第5天】 Vue框架:组件化开发利于重用与扩展,响应式数据绑定简化状态管理;学习曲线平缓,生态系统丰富,集成便捷,且具性能优化手段。缺点包括社区规模相对小,类型支持不足(Vue 3.x改善),路由和状态管理需额外配置,SEO支持有限。随着发展,部分缺点正被克服。
19 1
|
9天前
|
JavaScript
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
|
4天前
|
JavaScript 前端开发
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
9 0