脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue跳转页面携带参数

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跳转页面携带参数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论