JavaScript獲取地址欄參數(shù)的方法實現(xiàn)
更新時間：2023年07月21日 09:52:42 作者：富朝陽
這篇文章主要給大家介紹了關(guān)于JavaScript獲取地址欄參數(shù)的方法實現(xiàn),項目中經(jīng)常遇到獲取上個頁面跳轉(zhuǎn)過來獲取當前的參數(shù),文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
需求
若地址欄URL為：code-nav/article/917?type=12&title=abc，我們要獲取到地址欄后面的的type和title參數(shù)，如何才能拿到呢？
解決方案
1.原生JS實現(xiàn)：
1.1 采用正則表達式獲取地址欄參數(shù)(第一種方法)
//獲取地址欄參數(shù)，key:參數(shù)名稱
function getUrlParams(key) {
let reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
let r = window.location.search.substr(1)
.match(reg);
if (r != null)
return unescape(r[2]);
return null;
}
let title = getUrlParams("title"); // abc
let type = getUrlParams("type"); // 121.2 傳統(tǒng)方法截取實現(xiàn)（第二種方法）
//獲取地址欄參數(shù)
function getUrlParams() {
let url = window.location.search; //獲取url中"?"符后的字串
let paramsObj = new Object();
if (url.indexOf("?") != -1) {
let str = url.substr(1);
strs = str.split("&");
for (let i = 0; i < strs.length; i++) {
paramsObj[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
}
}
return paramsObj;
}
let type = getUrlParams().type; // 12
let title = getUrlParams().title; // abc2.Vue框架實現(xiàn)：
2.1 查詢參數(shù)獲?。▓鼍耙唬?/h4>
我們需要從地址code-nav/article/917?type=12&title=abc上拿到title的value abc。
<script setup>
import {useRouter} from 'vue-router'
const { currentRoute } = useRouter();
const route = currentRoute.value;
onMounted(()=>{
let type=route.query.type
console.log('type', type) // 12
})
</script>2.2 獲取路徑參數(shù)（場景二）
我們需要從地址code-nav/article/917上拿到917這個參數(shù)。
首先需要在router/index.js中定義好路由以及路徑參數(shù)，如下代碼：
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/:id',
name: 'home',
component: () => import('../views/home.vue')
},
]
})
export default router接著就可以在home.vue組件中通過路由useRouter得到參數(shù)，注意是route.params，如下代碼：
<script setup>
import {useRouter} from 'vue-router'
const { currentRoute } = useRouter();
const route = currentRoute.value;
onMounted(()=>{
let id=route.params.id
console.log('id', id) // 917
})
</script>3.Angular框架實現(xiàn)：
3.1 矩陣URL參數(shù)獲取（場景一）
參數(shù)拼接：
constructor(
private router: Router,
) {}
// 拼裝 matrix url
// code-nav/article;type=12;title=abc
go() {
this.router.navigate(['/code-nav/article', {
type: 12,
title: 'abc',
}]);
}使用 this.route.params 或 this.route.paramMap 來獲取 matrix URL 參數(shù)：
constructor(
private route: ActivatedRoute
) { }
ngOnInit() {
// 獲取參數(shù)， 使用 params
this.route.params.subscribe(params => {
console.log(params['type'],params['title']);
});
// 使用 paramMap
this.route.paramMap.subscribe(data => {
console.log(data['params'].type,data['params'].title);
})
}3.2 傳統(tǒng)獲?。▓鼍岸?/h4>
snapshot , queryParams , queryParamMap
constructor(
private route: ActivatedRoute
) { }
ngOnInit() {
// 獲取參數(shù)， 使用 queryParams
let param1 = this.route.snapshot.queryParams["title"];
let param2 = this.route.snapshot.queryParams["type"];
console.log(param1);
console.log(param2);
this.route.queryParams.subscribe(params => {
console.log(params['title'],params['name']);
});
// 獲取參數(shù)， 使用 queryParamMap
this.route.queryParamMap.subscribe(data => {
const params = data['params'];
console.log(params['title'],params['name']);
});
}4.React框架實現(xiàn)：
4.1 查詢參數(shù)獲?。▓鼍耙唬?/h4>
import { useParams } from "react-router-dom"
export default function Order() {
let params = useParams()
return <h2>title: {params.title}</h2>
}
import { useParams } from "react-router-dom"
export default function Order() {
let params = useParams()
return <h2>title: {params.title}</h2>
}總結(jié)
到此這篇關(guān)于JavaScript獲取地址欄參數(shù)的方法實現(xiàn)的文章就介紹到這了,更多相關(guān)JS獲取地址欄參數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
javascript對JSON數(shù)據(jù)排序的3個例子
這篇文章主要介紹了javascript對JSON數(shù)據(jù)排序的3個例子的相關(guān)資料2014-04-04
JavaScrip簡單數(shù)據(jù)類型隱式轉(zhuǎn)換的實現(xiàn)
本文主要介紹了JavaScrip簡單數(shù)據(jù)類型隱式轉(zhuǎn)換的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
JS實現(xiàn)鼠標拖拽盒子移動及右鍵點擊盒子消失效果示例
這篇文章主要介紹了JS實現(xiàn)鼠標拖拽盒子移動及右鍵點擊盒子消失效果,涉及javascript事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-01-01
Javascript操作select是表單中比較常見的，大家可以在網(wǎng)上搜索到很多的相關(guān)資料，接下來為大家詳細介紹下，JS動態(tài)操作select中的各種方法，感興趣的朋友可以參考下2013-10-10
在ES6中，引入了同步iteration的概念，隨著ES8中的Async操作符的引用，是不是可以在一異步操作中進行遍歷操作呢？今天要給大家講一講ES9中的異步遍歷的新特性Async iteration。2021-06-06
javascript實現(xiàn)無法關(guān)閉的彈框
本文分享了javascript實現(xiàn)無法關(guān)閉的彈框的實例代碼，感興趣的朋友可以看下2016-11-11
數(shù)組去重，一般需求是給你一個數(shù)組，調(diào)用去重方法，返回數(shù)值副本，副本中沒有重復(fù)元素。下面腳本之家小編給大家?guī)砹薺s數(shù)組去重的多種方法，非常不錯，需要的朋友參考下2017-09-09
拖動table標題實現(xiàn)改變td的大小(css+js代碼)
拖動列寬的表格table標題同時改變td的大小，本文將以實例演示為大家呈現(xiàn)，感興趣的朋友可以參考下哈，希望對你學(xué)習(xí)js或者css有所幫助2013-04-04
解決火狐瀏覽器下JS setTimeout函數(shù)不兼容失效不執(zhí)行的方法
今天檢查自己用JQuery+AJAX+PHP做的網(wǎng)站后臺登錄檢測，愛其他瀏覽器中兼容性還不錯 結(jié)果到了火狐（FireFox）瀏覽器下setTimeout這個JS內(nèi)置函數(shù)不執(zhí)行了，本文將提供詳細的解決方法2012-11-11
前端JavaScript實現(xiàn)簡單的在線電子簽名工具
這篇文章主要為大家詳細介紹了前端JavaScript實現(xiàn)簡單的在線電子簽名工具的相關(guān)知識,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-09-09