如何从 Vue.js 中的 URL 获取数据

在 Vue.js 中，我们通常使用路由来定义不同页面的 URL。当用户访问特定的路由时，我们可能需要从 URL 中获取数据来渲染该页面。本文将介绍如何在 Vue.js 中从 URL 中获取数据。

我们先来看一个例子，假设我们有一个商品列表页面，URL 为 /products，我们希望用户可以在 URL 上执行一些筛选操作，例如 /products?color=red&price=100，我们需要从 URL 中获取 color 和 price 参数，并根据这些参数渲染商品列表。

通过 $route.query 获取 URL 参数

在 Vue.js 的路由中，我们可以通过 $route 对象来获取当前路由的信息，包括路由路径、URL 参数等。URL 参数是以键值对的形式保存在 $route.query 中的，例如上述例子中可以通过 $route.query.color 和 $route.query.price 来获取对应的参数值。

以下是一个示例代码：

<template>
  <div>
    <h1>商品列表</h1>
    <ul>
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.name }} - {{ item.price }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '商品A', color: 'red', price: 100 },
        { id: 2, name: '商品B', color: 'blue', price: 200 },
        { id: 3, name: '商品C', color: 'green', price: 150 },
      ],
    };
  },

  computed: {
    filteredItems() {
      const color = this.$route.query.color;
      const price = Number(this.$route.query.price);  // 注意转换为数字类型
      return this.items.filter((item) => {
        return (!color || item.color === color) && (!price || item.price === price);
      });
    },
  },
};
</script>

监听 $route 对象的变化

虽然可以通过 $route.query 获取 URL 参数，但是如果用户在当前页面中传入新的 URL 参数，我们需要重新渲染页面。为了实现这个目的，我们可以利用 Vue.js 的 watch 机制，监听 $route 对象的变化。

以下是一个示例代码：

<script>
import { debounce } from 'lodash';

export default {
  data() {
    return {
      items: [
        { id: 1, name: '商品A', color: 'red', price: 100 },
        { id: 2, name: '商品B', color: 'blue', price: 200 },
        { id: 3, name: '商品C', color: 'green', price: 150 },
      ],
    };
  },

  computed: {
    filteredItems() {
      const color = this.$route.query.color;
      const price = Number(this.$route.query.price);  // 注意转换为数字类型
      return this.items.filter((item) => {
        return (!color || item.color === color) && (!price || item.price === price);
      });
    },
  },

  watch: {
    '$route.query': debounce(function (newQuery, oldQuery) {
      if (JSON.stringify(newQuery) !== JSON.stringify(oldQuery)) {  // 判断参数是否有变化
        // do something
      }
    }, 300),
  },
};
</script>

在以上示例代码中，我们使用了 Lodash 库中的 debounce 方法来降低监听频率，避免多次重复渲染。在 watch 方法中，我们比较了新旧 URL 参数对象的值，如果有变化，则可以执行重新渲染页面的操作。

总结

在 Vue.js 中获取 URL 参数很简单，只需要使用 $route.query 即可。如果需要实时监听 URL 参数的变化，可以使用 watch 方法监听 $route 对象。通过这些方法，我们可以轻松地从 URL 中获取数据，为页面渲染提供了很大的灵活性。