Vue3獲取地址欄參數(shù)方法詳解
Vue3 獲取地址欄參數(shù)有兩個方式：查詢參數(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ù)首先要定義要路由，在路由中對參數(shù)進行命名，下面代碼中:code就是命名一個路徑參數(shù)code
首先需要在router/index.js中定義好路由以及路徑參數(shù)
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/:code',
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 code=route.params.code
console.log('code', code)
})
</script>
三、注意點
入口頁面App.vue必須定義好router-view標簽，不能圖簡單將上面定義的home組件直接引入到App.vue中，如果直接引入走的就不是路由了，因而通過useRouter也無法獲取到路由參數(shù)了
如下錯誤示例：
<template>
<div id="app">
<home></home>
</div>
</template>
<script setup>
import home from './views/home.vue';
</script>
正確應(yīng)該是使用router-view標簽
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script setup>
</script>
到此這篇關(guān)于Vue3獲取地址欄參數(shù)方法詳解的文章就介紹到這了,更多相關(guān)Vue3獲取地址欄參數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vuex的使用和簡易實現(xiàn)，幫助大家更好的理解和使用vuex，感興趣的朋友可以了解下2021-01-01
vue實現(xiàn)的封裝全局filter并統(tǒng)一管理操作示例
這篇文章主要介紹了vue實現(xiàn)的封裝全局filter并統(tǒng)一管理操作,結(jié)合實例形式詳細分析了vue封裝全局filter及相關(guān)使用技巧,需要的朋友可以參考下2020-02-02
本篇文章主要介紹了VUE使用vuex解決模塊間傳值問題 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
本文通過實例代碼給大家介紹了vue 圖標選擇器的相關(guān)知識，圖文實例代碼相結(jié)合給大家介紹的非常詳細，對大家的學(xué)習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2021-11-11
在Vue里渲染一塊內(nèi)容，會有四個流程步驟，那么該怎么理解這個流程呢，所以本文就給大家詳細講解一下Vue 渲染流程，文中有纖細的代碼示例供大家參考,需要的朋友可以參考下2023-07-07
本文以click為例給大家介紹vue.js中常用v-指令，可以用 v-on 指令監(jiān)聽 DOM 事件，并在觸發(fā)時運行一些 JavaScript代碼，本文通過示例代碼給大家介紹的非常詳細，感興趣的朋友跟隨小編一起看看吧2021-10-10
electron中使用本地數(shù)據(jù)庫的方法詳解
眾所周知,electron是可以開發(fā)桌面端的框架,那我們有一些數(shù)據(jù)不想讓別人看到,只能在自己的電腦上展示時怎么辦呢,這個時候就可以用到本地數(shù)據(jù)庫,本文將以sqlite3為例介紹一下electron如何使用本地數(shù)據(jù)庫2023-10-10
這篇文章主要介紹了vue中使用ueditor富文本編輯器的相關(guān)資料,需要的朋友可以參考下2018-02-02
后端寫個上傳圖片的接口可不是很簡單，只需要讓這個字段限制為圖片格式，后臺做個保存的邏輯就完事了，前端處理還要牽扯到請求頭，數(shù)據(jù)格式的處理等等問題，按照老傳統(tǒng)把圖片按照字符串往接口put發(fā)現(xiàn)返回的全是400錯誤，直到我知道了前端的FormData方法！2021-05-05
在實際業(yè)務(wù)中，我們常用圖表來做數(shù)據(jù)統(tǒng)計，數(shù)據(jù)展示，數(shù)據(jù)可視化等比較直觀的方式來達到一目了然的數(shù)據(jù)查看，但在大屏開發(fā)過程中，常會因為適配不同屏幕而感到困擾，下面我們來解決一下這個不算難題的難題2022-11-11