VueJS 取得 URL 参数值的方法

请参考以下攻略：

一、背景介绍

在 VueJS 中，我们通常需要获取 URL 地址中的参数值，以便在页面上或组件内使用。本文就来介绍一下如何在 VueJS 中获取 URL 参数值。

二、获取 URL 参数值的方法

在 VueJS 中获取 URL 参数值有多种方法，这里我们结合两个实例来进行介绍。

方法一：使用 window.location.search 方法

我们可以使用 window.location.search 方法获取 URL 中的查询字符串，然后再从查询字符串中提取参数值。

例如，以下 URL 的查询字符串为 "?id=123&name=张三"，我们需要获取其中的 id 和 name 参数值：

https://www.example.com/path/to/page.html?id=123&name=张三

以下是实现代码：

// 读取查询字符串
const queryString = window.location.search;
// 将查询字符串解析成对象
const queryParams = new URLSearchParams(queryString);
// 获取 id 和 name 参数值
const id = queryParams.get('id');
const name = queryParams.get('name');

通过上面的代码可以获取到 id 和 name 的值。

方法二：使用 Vue Router 的 $route.params 属性

Vue Router 是 VueJS 官方路由库，其中有一个 $route 对象用于访问当前活动路由的相关信息。$route 对象中的 params 属性可以获取 URL 中的参数值。

例如，我们定义了以下路由：

const routes = [
  { path: '/user/:id', component: User }
]

在组件内可以使用以下方法获取 URL 中的参数值：

export default {
  name: 'User',
  props: ['id'],
  created () {
    console.log(this.id) // 输出 URL 中的参数值
  }
}

这里，我们使用了 props 属性将 id 参数传入组件中，可以在组件内部通过 this.id 访问到这个参数的值。

三、总结

本文介绍了两种获取 URL 中参数值得方法，一种是使用 window.location.search 方法，另一种是使用 Vue Router 的 $route.params 属性。这两种方法都可以方便地获取 URL 中的参数值，可以根据具体使用场景选择合适的方法。