vue如何获取参数方法的封装

更新时间：2024年12月26日 09:33:51 作者：小曲曲

文章介绍了如何在Vue.js中获取URL参数、定义和暴露公共方法、在main.js中引入并注册到Vue实例原型,以及页面中调用这些方法,作者分享了个人经验,希望对大家有所帮助

vue获取参数方法的封装

url里的参数可以使用this.$route.query获取

1、comon.js中定义公共方法，并暴露出去

// 获取原生跳转过来的参数
// 使用方法：1、commonjs中定义方法  2、main.js中引入，注册给原型  3、页面使用
export function GetRequest() {
    let url = location.href.split("?")[1].split("&"); //获取url中"?"符后的字串

    console.log(url);
    let query = {};
    url.forEach(item => {
        query[item.split("=")[0]] = decodeURIComponent(item.split("=")[1]);  //转码
    });
    return query;
}

2、main.js中引入，并注册给Vue实例的原型

// 获取url中拼接的参数
import { GetRequest } from "./common/js/common.js";
Vue.prototype.query = GetRequest;

3、页面中调用

 mounted() {
    console.log(this.query);
    }

vue封装全局方法

方式一

1、封装

const util = {
	getCookie:()=>{
		return null;
	}
}
module.exports = util;

2、调用

import util from '../assets/js/util.js'
util.getCookie();

方式二

1、封装

export function getCookie(){
	return null;
}

export function setCookie(){
	return null;
}

2、调用

import { getCookie,setCookie } from '../assets/js/util.js'
getCookie();
setCookie();

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue.js的双向数据绑定Object.defineProperty方法的神奇之处
今天小编就为大家分享一篇关于vue.js的双向数据绑定Object.defineProperty方法的神奇之处，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2019-01-01
Vue组件的使用教程详解
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。这篇文章给大家介绍了vue组件的使用，需要的朋友参考下吧
2018-01-01
Vue自定义指令的使用详细介绍
我们看到的v-开头的行内属性，都是指令，不同的指令可以完成或实现不同的功能，对普通 DOM元素进行底层操作，这时候就会用到自定义指令。除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令
2022-09-09
vue3之声明式和编程式导航详解
这篇文章主要介绍了vue3之声明式和编程式导航,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-06-06
elementUI el-input 只能输入正整数验证的操作方法
这篇文章主要介绍了elementUI el-input 只能输入正整数验证,本文给大家详细讲解对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-11-11
Vue.js实现watch属性的示例详解
本文讨论了watch函数是如何利用副作用函数和options进行封装实现的，也通过调度函数去控制回调函数的立即执行和执行时机，还可以解决竞态问题，感兴趣的可以了解一下
2022-04-04
Vue中代码传送(teleport)的实现
本文主要介绍了Vue中代码传送(teleport)的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
使用Vue Router路由懒加载引发的生产页面白屏问题的解决方法
这篇文章主要介绍了使用Vue Router 路由懒加载引发的生产页面白屏问题的原因和解决方法,并有相关的代码示例和图文供大家参考,需要的朋友可以参考下
2025-09-09
vue插件tab选项卡使用小结
这篇文章主要为大家详细介绍了vue插件tab选项卡的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10
使用ExcelJS实现Excel数据报表导出的完整指南
这篇文章主要为大家详细介绍了如何使用ExcelJS实现Excel数据报表导出的相关知识,文中的示例代码,感兴趣的小伙伴可以跟随小编一起学习一下
2025-07-07