vue如何獲取參數(shù)方法的封裝
更新時(shí)間：2024年12月26日 09:33:51 作者：小曲曲
文章介紹了如何在Vue.js中獲取URL參數(shù)、定義和暴露公共方法、在main.js中引入并注冊(cè)到Vue實(shí)例原型,以及頁面中調(diào)用這些方法,作者分享了個(gè)人經(jīng)驗(yàn),希望對(duì)大家有所幫助
vue獲取參數(shù)方法的封裝
url里的參數(shù)可以使用this.$route.query獲取
- 1、comon.js中定義公共方法，并暴露出去
// 獲取原生跳轉(zhuǎn)過來的參數(shù)
// 使用方法：1、commonjs中定義方法 2、main.js中引入，注冊(cè)給原型 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]); //轉(zhuǎn)碼
});
return query;
}- 2、main.js中引入，并注冊(cè)給Vue實(shí)例的原型
// 獲取url中拼接的參數(shù)
import { GetRequest } from "./common/js/common.js";
Vue.prototype.query = GetRequest;- 3、頁面中調(diào)用
mounted() {
console.log(this.query);
}vue封裝全局方法
方式一
- 1、封裝
const util = {
getCookie:()=>{
return null;
}
}
module.exports = util;- 2、調(diào)用
import util from '../assets/js/util.js' util.getCookie();
方式二
- 1、封裝
export function getCookie(){
return null;
}
export function setCookie(){
return null;
}- 2、調(diào)用
import { getCookie,setCookie } from '../assets/js/util.js'
getCookie();
setCookie();總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js中用v-bind綁定class的注意事項(xiàng)
關(guān)于數(shù)據(jù)綁定一個(gè)常見需求就是操作元素的class列表和它的內(nèi)聯(lián)樣式。因?yàn)樗鼈兌际菍傩?，我們可以?v-bind 處理它們，但是使用v-bind綁定class的時(shí)候我們要有一些注意事項(xiàng)，下面這篇文章就給大家分享了下要注意的方面，希望能對(duì)大家有所幫助，下面來一起看看吧。2016-12-12
今天小編就為大家分享一篇在vue中讀取本地Json文件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細(xì)介紹了vue分頁器組件編寫方法，可設(shè)置初始當(dāng)前頁，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
Vue項(xiàng)目引用百度地圖并實(shí)現(xiàn)搜索定位等功能(案例分析)
這篇文章主要介紹了Vue項(xiàng)目引用百度地圖并實(shí)現(xiàn)搜索定位等功能(案例分析),本篇文章為案例分析，技術(shù)點(diǎn)較多，所以篇幅較長(zhǎng)，認(rèn)真閱覽的你一定會(huì)學(xué)到很多知識(shí)，需要的朋友可以參考下2022-09-09
解決vue數(shù)組中對(duì)象屬性變化頁面不渲染問題
今天小編就為大家分享一篇解決vue數(shù)組中對(duì)象屬性變化頁面不渲染問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細(xì)介紹了前端框架Vue.js構(gòu)建大型應(yīng)用的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
vue實(shí)現(xiàn)一拉到底的滑動(dòng)驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了vue簡(jiǎn)單的一拉到底的滑動(dòng)驗(yàn)證，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
Vue引入highCharts實(shí)現(xiàn)數(shù)據(jù)可視化
這篇文章主要為大家詳細(xì)介紹了Vue引入highCharts實(shí)現(xiàn)數(shù)據(jù)可視化，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue+elementUI實(shí)現(xiàn)分頁效果
這篇文章主要為大家詳細(xì)介紹了vue+elementUI實(shí)現(xiàn)分頁效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
uniApp前端實(shí)現(xiàn)文字識(shí)別并提取詳細(xì)分析
這篇文章主要介紹了如何實(shí)現(xiàn)文字圖片分析的功能,包括頁面結(jié)構(gòu)、樣式和腳本邏輯,主要步驟包括獲取access_token、將圖片轉(zhuǎn)換為Base64格式、上傳至百度文字識(shí)別接口并處理返回結(jié)果,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-02-02