vue跳转页面携带参数并且立即执行方法

 更新时间:2023年10月12日 10:23:10   作者:时间不会赖着不走  
这篇文章主要介绍了vue跳转页面携带参数并且立即执行方法,首先定义跳转函数,结合实例代码给大家介绍的非常详细,需要的朋友参考下吧

vue跳转页面的几种方法(推荐)

vue中如何携带参数跳转页面

vue使用window.open()跳转页面的代码案例

1.首先定义跳转函数

这个是链接跳转

<a href="javascript:void(0)" rel="external nofollow"  onclick="openPage()">位移变化趋势图</a></td></tr>
			</table>
 methods: {
    openPage(){
              // this.$router.push('/dis/show');
        this.$router.push({path: '/dis/show',
        query: {
          searchObj: { type:"monitoring1" ,data:"data_real",begin:"2018-12-20",end:"2018-12-29"}
                 }              
               });

2.跳转页面接收参数

 data() {
        return {
          searchObj:{},
          btnDisabled:false
        }
    },
    created(){
   this.getParams(),
    this.showChart() 
  },
    methods:{
      getParams(){
    // 取到路由带过来的参数赋值给searchObj
    this.searchObj = this.$route.query.searchObj
   },

3.跳转后直接执行方法

在这里插入图片描述

就是在跳转页面直接执行

到此这篇关于vue跳转页面携带参数并且立即执行方法的文章就介绍到这了,更多相关vue跳转页面携带参数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 微信内置开发 iOS修改键盘换行为搜索的解决方案

    微信内置开发 iOS修改键盘换行为搜索的解决方案

    今天小编就为大家分享一篇微信内置开发 iOS修改键盘换行为搜索的解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • npm ERR! code E404在vscode安装插件时报错的两种解决方案

    npm ERR! code E404在vscode安装插件时报错的两种解决方案

    这篇文章主要给大家介绍了关于npm ERR! code E404在vscode安装插件时报错的两种解决方案,关于这个问题,通常是由于插件名称输入错误、网络问题或插件已被删除引起的,文中将两种解决方法都介绍的非常详细,需要的朋友可以参考下
    2023-04-04
  • Vue报错:TypeError:Cannot create property 'xxx' on string 'xxxx'问题

    Vue报错:TypeError:Cannot create property '

    这篇文章主要介绍了Vue报错:TypeError:Cannot create property 'xxx' on string 'xxxx'问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • Vue PostCSS的使用介绍

    Vue PostCSS的使用介绍

    postcss一种对css编译的工具,类似babel对js的处理,postcss只是一个工具,本身不会对css一顿操作,它通过插件实现功能,autoprefixer就是其一
    2023-02-02
  • Vue 3需要避免的错误

    Vue 3需要避免的错误

    Vue3已经稳定了相当长一段时间了。许多代码库都在生产环境中使用它,其他人最终都将不得不迁移到Vue3。我现在有机会使用它并记录了我的错误,下面这些错误你可能想要避免
    2023-03-03
  • 详解vue模拟加载更多功能(数据追加)

    详解vue模拟加载更多功能(数据追加)

    本篇文章主要介绍了vue模拟加载更多功能(数据追加),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • vue3 Teleport瞬间移动函数使用方法详解

    vue3 Teleport瞬间移动函数使用方法详解

    这篇文章主要为大家详细介绍了vue3 Teleport瞬间移动函数使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-03-03
  • vue中 el-table每个单元格包含多个数据项处理

    vue中 el-table每个单元格包含多个数据项处理

    vue项目中,我们需要在el-table中显示数组数据,有的时候,需要在一个单元格中显示多条数据,如何实现呢,对vue el-table单元格相关知识感兴趣的朋友一起看看吧
    2023-11-11
  • Vue2的路由和异步请求方式

    Vue2的路由和异步请求方式

    这篇文章主要介绍了Vue2的路由和异步请求方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06
  • Vue之data定义的三种方式及区别说明

    Vue之data定义的三种方式及区别说明

    这篇文章主要介绍了Vue之data定义的三种方式及区别说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03

最新评论