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中取得跳轉路徑參數的方法很簡單，無論是使用vue-router插件或直接使用window.location.href進行跳轉，我們都可以依靠$ route或location等物件來取得傳遞過來的參數。本文介紹了兩種方式，開發者可以按照實際情況選擇適合自己的方法。

以上是vue怎麼取得跳轉路徑參數的詳細內容。更多資訊請關注PHP中文網其他相關文章！