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();总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
关于数据绑定一个常见需求就是操作元素的class列表和它的内联样式。因为它们都是属性，我们可以用 v-bind 处理它们，但是使用v-bind绑定class的时候我们要有一些注意事项，下面这篇文章就给大家分享了下要注意的方面，希望能对大家有所帮助，下面来一起看看吧。2016-12-12
今天小编就为大家分享一篇在vue中读取本地Json文件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家详细介绍了vue分页器组件编写方法，可设置初始当前页，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-06-06
这篇文章主要介绍了Vue项目引用百度地图并实现搜索定位等功能(案例分析),本篇文章为案例分析，技术点较多，所以篇幅较长，认真阅览的你一定会学到很多知识，需要的朋友可以参考下2022-09-09
今天小编就为大家分享一篇解决vue数组中对象属性变化页面不渲染问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要为大家详细介绍了前端框架Vue.js构建大型应用的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
这篇文章主要为大家详细介绍了vue简单的一拉到底的滑动验证，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
这篇文章主要为大家详细介绍了Vue引入highCharts实现数据可视化，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要为大家详细介绍了vue+elementUI实现分页效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了如何实现文字图片分析的功能,包括页面结构、样式和脚本逻辑,主要步骤包括获取access_token、将图片转换为Base64格式、上传至百度文字识别接口并处理返回结果,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-02-02
最新评论