vue如何獲取參數(shù)方法的封裝
更新時(shí)間：2024年12月26日 09:33:51 作者：小曲曲
文章介紹了如何在Vue.js中獲取URL參數(shù)、定義和暴露公共方法、在main.js中引入并注冊到Vue實(shí)例原型,以及頁面中調(diào)用這些方法,作者分享了個(gè)人經(jīng)驗(yàn),希望對大家有所幫助
vue獲取參數(shù)方法的封裝
url里的參數(shù)可以使用this.$route.query獲取
- 1、comon.js中定義公共方法，并暴露出去
// 獲取原生跳轉(zhuǎn)過來的參數(shù)
// 使用方法：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]); //轉(zhuǎn)碼
});
return query;
}- 2、main.js中引入，并注冊給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的雙向數(shù)據(jù)綁定Object.defineProperty方法的神奇之處
今天小編就為大家分享一篇關(guān)于vue.js的雙向數(shù)據(jù)綁定Object.defineProperty方法的神奇之處，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-01-01
組件 (Component) 是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。這篇文章給大家介紹了vue組件的使用，需要的朋友參考下吧2018-01-01
我們看到的v-開頭的行內(nèi)屬性，都是指令，不同的指令可以完成或?qū)崿F(xiàn)不同的功能，對普通 DOM元素進(jìn)行底層操作，這時(shí)候就會(huì)用到自定義指令。除了核心功能默認(rèn)內(nèi)置的指令 (v-model 和 v-show)，Vue 也允許注冊自定義指令2022-09-09
這篇文章主要介紹了vue3之聲明式和編程式導(dǎo)航,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
elementUI el-input 只能輸入正整數(shù)驗(yàn)證的操作方法
這篇文章主要介紹了elementUI el-input 只能輸入正整數(shù)驗(yàn)證,本文給大家詳細(xì)講解對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-11-11
Vue.js實(shí)現(xiàn)watch屬性的示例詳解
本文討論了watch函數(shù)是如何利用副作用函數(shù)和options進(jìn)行封裝實(shí)現(xiàn)的，也通過調(diào)度函數(shù)去控制回調(diào)函數(shù)的立即執(zhí)行和執(zhí)行時(shí)機(jī)，還可以解決競態(tài)問題，感興趣的可以了解一下2022-04-04
Vue中代碼傳送(teleport)的實(shí)現(xiàn)
本文主要介紹了Vue中代碼傳送(teleport)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
使用Vue Router路由懶加載引發(fā)的生產(chǎn)頁面白屏問題的解決方法
這篇文章主要介紹了使用Vue Router 路由懶加載引發(fā)的生產(chǎn)頁面白屏問題的原因和解決方法,并有相關(guān)的代碼示例和圖文供大家參考,需要的朋友可以參考下2025-09-09
這篇文章主要為大家詳細(xì)介紹了vue插件tab選項(xiàng)卡的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
使用ExcelJS實(shí)現(xiàn)Excel數(shù)據(jù)報(bào)表導(dǎo)出的完整指南
這篇文章主要為大家詳細(xì)介紹了如何使用ExcelJS實(shí)現(xiàn)Excel數(shù)據(jù)報(bào)表導(dǎo)出的相關(guān)知識(shí),文中的示例代碼,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-07-07