vue如何获取参数方法的封装
作者：小曲曲
文章介绍了如何在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();总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。