真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

Vue3如何獲取地址欄參數(shù)

本篇內(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ù)獲取方式不一樣。

一、查詢參數(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ù)了


import {useRouter} from 'vue-router'

const { currentRoute } = useRouter();
const route = currentRoute.value;

onMounted(()=>{
  let code=route.query.code
  console.log('code', code)
})

二、路徑參數(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


import {useRouter} from 'vue-router'

const { currentRoute } = useRouter();
const route = currentRoute.value;

onMounted(()=>{
  let code=route.params.code
  console.log('code', code)
})

三、注意點(diǎn)

入口頁面App.vue必須定義好router-view標(biāo)簽,不能圖簡單將上面定義的home組件直接引入到App.vue中,如果直接引入走的就不是路由了,因而通過useRouter也無法獲取到路由參數(shù)了

如下錯(cuò)誤示例:




import home from './views/home.vue';

正確應(yīng)該是使用router-view標(biāo)簽




“Vue3如何獲取地址欄參數(shù)”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!


當(dāng)前名稱:Vue3如何獲取地址欄參數(shù)
URL分享:http://weahome.cn/article/iphjsp.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部