vue如何獲取跳轉路徑參數

本文小編為大家詳細介紹“vue如何獲取跳轉路徑參數”，內容詳細，步驟清晰，細節處理妥當，希望這篇“vue如何獲取跳轉路徑參數”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

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

使用vue-router插件進行路由跳轉

vue-router是Vue官方提供的路由插件，可以幫助我們在Vue中進行路由控制。在vue-router中，通過$route對象可以獲取到當前路由的信息，包括跳轉路徑參數。

假設我們有一個路由配置如下：

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

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

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

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

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

直接在頁面中使用window.location.href進行路由跳轉

在Vue中，我們也可以直接使用window.location.href進行頁面跳轉。例如：

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

這里我們將id參數拼接在了跳轉的url中，下面我們來看如何在目標頁面中獲取這個參數。

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

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

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

讀到這里，這篇“vue如何獲取跳轉路徑參數”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。