vue3獲取url地址參數(shù)的示例詳解
vue3獲取url地址參數(shù)
import { useRouter, useRoute } from 'vue-router';
setup() {
let router = useRouter();
let route = useRoute();
}
function GetRequest(value) {
var url = decodeURI(window.location.search); //?id="123456"&name="www";
var object = {};
if (url.indexOf("?") != -1)//url中存在問號(hào),也就說有參數(shù)。
{
var str = url.substr(1); //得到?后面的字符串
var strs = str.split("&"); //將得到的參數(shù)分隔成數(shù)組[id="123456",name="www"];
for (var i = 0; i < strs.length; i++) {
object[strs[i].split("=")[0]] = strs[i].split("=")[1];//得到{id:'123456',name:'www'}
}
}
return object[value];
}附錄:Vue3獲取地址欄參數(shù)
Vue3 獲取地址欄參數(shù)有兩個(gè)方式:查詢參數(shù)和路徑參數(shù)。
Vue3獲取地址欄參數(shù)是從路由router中獲取,查詢參數(shù)和路徑參數(shù)獲取方式不一樣。
一、查詢參數(shù)
比如地址 http://127.0.0.1:5173/?code=123123,
我們要獲取code參數(shù)可以路由router獲取,注意是route.query
首先需要在router/index.js中定義好路由
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: () => import('../views/home.vue')
},
]
})
export default router然后就可以在組件中通過useRouter獲取query參數(shù)了
<script setup>
import {useRouter} from 'vue-router'
const { currentRoute } = useRouter();
const route = currentRoute.value;
onMounted(()=>{
let code=route.query.code
console.log('code', code)
})
</script>二、路徑參數(shù)
路徑參數(shù)指的是參數(shù)是拼接在地址欄中的。
比如地址 http://127.0.0.1:5173/123123
最后的123123就是參數(shù)。
這種參數(shù)首先要定義要路由,在路由中對(duì)參數(shù)進(jìn)行命名,下面代碼中:code就是命名一個(gè)路徑參數(shù)code
首先需要在router/index.js中定義好路由以及路徑參數(shù)
<script setup>
import {useRouter} from 'vue-router'
const { currentRoute } = useRouter();
const route = currentRoute.value;
onMounted(()=>{
let code=route.query.code
console.log('code', code)
})
</script>接著就可以在home.vue組件中通過路由useRouter得到參數(shù),注意是route.params
<script setup>
import {useRouter} from 'vue-router'
const { currentRoute } = useRouter();
const route = currentRoute.value;
onMounted(()=>{
let code=route.params.code
console.log('code', code)
})
</script>三、注意點(diǎn)
入口頁面App.vue必須定義好router-view標(biāo)簽,不能圖簡(jiǎn)單將上面定義的home組件直接引入到App.vue中,如果直接引入走的就不是路由了,因而通過useRouter也無法獲取到路由參數(shù)了
如下錯(cuò)誤示例:
<template>
<div id="app">
<home></home>
</div>
</template>
<script setup>
import home from './views/home.vue';
</script>正確應(yīng)該是使用router-view標(biāo)簽
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script setup>
</script>到此這篇關(guān)于vue3獲取url地址參數(shù)的文章就介紹到這了,更多相關(guān)vue3地址參數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue中前進(jìn)刷新、后退緩存用戶瀏覽數(shù)據(jù)和瀏覽位置的實(shí)例講解
今天小編就為大家分享一篇vue中前進(jìn)刷新、后退緩存用戶瀏覽數(shù)據(jù)和瀏覽位置的實(shí)例講解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
在vue中實(shí)現(xiàn)清除echarts上次保留的數(shù)據(jù)(親測(cè)有效)
這篇文章主要介紹了在vue中實(shí)現(xiàn)清除echarts上次保留的數(shù)據(jù)(親測(cè)有效),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Vue 3 中使用路由參數(shù)跳轉(zhuǎn)時(shí) watch 觸發(fā)重復(fù)請(qǐng)求問題解決
Vue3中watch(route.query.id)可能因跨頁參數(shù)變化重復(fù)觸發(fā)請(qǐng)求,需通過路由name判斷當(dāng)前頁面,避免誤操作,route.query是響應(yīng)式,setup不重執(zhí)行,watch需手動(dòng)處理上下文,本文給大家介紹Vue 3 中使用路由參數(shù)跳轉(zhuǎn)時(shí) watch 觸發(fā)重復(fù)請(qǐng)求問題解決,感興趣的朋友一起看看吧2025-07-07
使用Vue實(shí)現(xiàn)帶拖動(dòng)和播放功能的時(shí)間軸
這篇文章主要為大家詳細(xì)介紹了如何使用Vue實(shí)現(xiàn)帶拖動(dòng)和播放功能的時(shí)間軸,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
vue ElementUI的from表單實(shí)現(xiàn)登錄效果的示例
本文主要介紹了vue ElementUI的from表單實(shí)現(xiàn)登錄效果的示例,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09
vue實(shí)現(xiàn)循環(huán)滾動(dòng)列表
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)循環(huán)滾動(dòng)列表,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-06-06

