VueJs get url query

在Vue.js中获取URL查询参数可以通过几种方式实现，具体取决于您的项目配置和您选择使用的路由管理库。以下是使用Vue.js和Vue Router的一些常见方法：

1. 使用 Vue Router 的 $route.query

假设您已经在项目中集成了Vue Router，您可以使用$route.query来访问URL中的查询参数。这个对象包含了当前路由的所有查询参数，其中每个字段的键是查询参数的名字，值是对应的值。

示例代码：

javascript
export default {
  name: "MyComponent",
  mounted() {
    // 假设 URL 是： http://example.com/?name=John&age=30
    const name = this.$route.query.name; // John
    const age = this.$route.query.age; // 30
    console.log(`Name: ${name}, Age: ${age}`);
  }
}

这种方法的好处是可以非常直观地获取和监视URL查询参数的变化。

2. 在没有 Vue Router 的情况下使用原生 JavaScript

如果您的项目没有使用Vue Router，您可以使用原生JavaScript的URLSearchParams对象来获取查询参数。

示例代码：

javascript
export default {
  name: "MyComponent",
  mounted() {
    const params = new URLSearchParams(window.location.search);
    const name = params.get('name'); // John
    const age = params.get('age'); // 30
    console.log(`Name: ${name}, Age: ${age}`);
  }
}

这种方法适用于不使用Vue Router但仍需要访问URL查询参数的简单场景。

3. 监听路由变化

如果您需要在查询参数变化时进行响应，可以在Vue组件中监听$route对象的变化。

示例代码：

javascript
export default {
  name: "MyComponent",
  watch: {
    '$route'(to, from) {
      // 只关注查询参数的变化
      if (to.query !== from.query) {
        console.log('Query parameters changed:', to.query);
      }
    }
  }
}

这可以帮助您处理更复杂的场景，比如查询参数变化时需要重新加载数据或执行其他动作。

总结

根据您的项目具体使用的技术栈（是否使用Vue Router等），可以选择适合的方法来获取URL中的查询参数。使用Vue Router的$route.query通常是最直接和易于管理的方式，但使用原生JavaScript也是一种不错的替代方案，尤其是在简单的应用中或者不使用Vue Router的情况下。