本篇內(nèi)容介紹了“Vue3如何獲取地址欄參數(shù)”的有關(guān)知識,在實(shí)際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
陽城網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián),陽城網(wǎng)站設(shè)計(jì)制作,有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為陽城千余家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站制作要多少錢,請找那個(gè)售后服務(wù)好的陽城做網(wǎng)站的公司定做!
Vue3 獲取地址欄參數(shù)有兩個(gè)方式:查詢參數(shù)和路徑參數(shù)。
Vue3獲取地址欄參數(shù)是從路由router中獲取,查詢參數(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ù)了
路徑參數(shù)指的是參數(shù)是拼接在地址欄中的。
比如地址 http://127.0.0.1:5173/123123
最后的123123就是參數(shù)。
這種參數(shù)首先要定義要路由,在路由中對參數(shù)進(jìn)行命名,下面代碼中:code就是命名一個(gè)路徑參數(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
入口頁面App.vue
必須定義好router-view
標(biāo)簽,不能圖簡單將上面定義的home組件直接引入到App.vue
中,如果直接引入走的就不是路由了,因而通過useRouter
也無法獲取到路由參數(shù)了
如下錯(cuò)誤示例:
正確應(yīng)該是使用router-view
標(biāo)簽
“Vue3如何獲取地址欄參數(shù)”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!