vue如何獲取跳轉(zhuǎn)路徑參數(shù)

本文小編為大家詳細(xì)介紹“vue如何獲取跳轉(zhuǎn)路徑參數(shù)”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“vue如何獲取跳轉(zhuǎn)路徑參數(shù)”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

創(chuàng)新互聯(lián)公司長(zhǎng)期為近千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為青白江企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)，青白江網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

在Vue中進(jìn)行路由跳轉(zhuǎn)有兩種方式：使用vue-router插件或者直接在頁面中使用window.location.href進(jìn)行跳轉(zhuǎn)。無論是哪種方式，獲取跳轉(zhuǎn)路徑參數(shù)的方法是類似的。

使用vue-router插件進(jìn)行路由跳轉(zhuǎn)

vue-router是Vue官方提供的路由插件，可以幫助我們?cè)赩ue中進(jìn)行路由控制。在vue-router中，通過$route對(duì)象可以獲取到當(dāng)前路由的信息，包括跳轉(zhuǎn)路徑參數(shù)。

假設(shè)我們有一個(gè)路由配置如下：

{
  path: '/detail/:id',
  component: Detail
}

這里的:id表示這是一個(gè)路徑參數(shù)，可以通過路由進(jìn)行傳遞，例如/detail/123就代表id為123的詳情頁。

在目標(biāo)頁面Detail中，我們可以通過$route.params來獲取傳遞過來的參數(shù)。代碼如下：

export default {
  name: 'Detail',
  mounted() {
    const id = this.$route.params.id; // 獲取跳轉(zhuǎn)路徑參數(shù)id的值
    console.log('id:', id);
  }
};

在mounted鉤子中，可以通過this.$route.params.id的方式獲取到跳轉(zhuǎn)路徑中傳遞過來的id參數(shù)。

直接在頁面中使用window.location.href進(jìn)行路由跳轉(zhuǎn)

在Vue中，我們也可以直接使用window.location.href進(jìn)行頁面跳轉(zhuǎn)。例如：

window.location.href = '/detail?id=123';

這里我們將id參數(shù)拼接在了跳轉(zhuǎn)的url中，下面我們來看如何在目標(biāo)頁面中獲取這個(gè)參數(shù)。

我們可以使用location.search來獲取跳轉(zhuǎn)路徑中問號(hào)后面的參數(shù)部分，然后再使用正則匹配獲取我們需要的參數(shù)的值。代碼如下：

export default {
  name: 'Detail',
  mounted() {
    const query = location.search.substring(1); // 獲取跳轉(zhuǎn)路徑參數(shù)字符串，去掉問號(hào)
    const reg = new RegExp(`(^|&)id=([^&]*)(&|$)`); // 匹配id參數(shù)的正則表達(dá)式
    const id = query.match(reg)[2]; // 獲取跳轉(zhuǎn)路徑參數(shù)id的值
    console.log('id:', id);
  }
};

以上代碼通過正則表達(dá)式匹配到id參數(shù)的值，并且存放在變量id中。

讀到這里，這篇“vue如何獲取跳轉(zhuǎn)路徑參數(shù)”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站題目：vue如何獲取跳轉(zhuǎn)路徑參數(shù)
網(wǎng)頁路徑：http://muchs.cn/article42/ghschc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、企業(yè)網(wǎng)站制作、軟件開發(fā)、移動(dòng)網(wǎng)站建設(shè)、微信小程序、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)