Vue 读取 URL - Javascript

在许多Web应用程序中，我们需要从URL获取查询参数，以便我们可以根据它们进行操作。Vue.js使得在我们的组件中读取URL的查询参数非常容易。

Vue Router

Vue.js的常用路由库是Vue Router。Vue Router是一个官方的库，支持Vue.js应用程序的路由。我们可以使用它来跟踪我们的应用程序状态，以便我们可以使用URL查询参数来控制它。

在Vue Router中，我们可以通过$router对象访问URL和路由，通过$route对象可以获取URL和路由的信息。

读取URL查询参数

我们可以使用$route.query属性来读取URL查询参数。这是一个对象，包含所有传递的查询参数。

<template>
  <div>
    <h2>URL Query Params</h2>
    <p>{{query}}</p>
  </div>
</template>

<script>
export default {
  name: "QueryParams",
  data() {
    return {
      query: this.$route.query
    };
  }
};
</script>

通过上述代码，我们可以在页面中直接显示URL中的查询参数：http://localhost:8080/?page=home，则页面会显示：

URL Query Params

{ page: 'home' }

渲染查询参数

我们还可以在Vue组件中动态地渲染查询参数。例如，如果我们使用了动态路由，则我们可以在组件中从路由参数中获取值并将其渲染到模板中。

假设我们有一个名为“User”的组件，他接受一个id参数。我们可以在模板中渲染这个参数：

<template>
  <div>
    <h2>User Detail</h2>
    <p>User ID: {{id}}</p>
  </div>
</template>

<script>
export default {
  name: "User",
  data() {
    return {
      id: this.$route.params.id
    };
  }
};
</script>

使用动态路由，我们可以通过http://localhost:8080/user/25传递参数，组件将获取并渲染ID参数：

User Detail

User ID: 25

结论

Vue.js使读取URL的查询参数非常容易，并且在我们的应用中使用这些参数可以更好的控制和管理应用。Vue Router提供了方便地方法来检索和使用这些参数。我们可以根据这些参数来动态地渲染组件。