Vue 路由参数 query 清除与保留的完美处理攻略

2023-09-07 10:59:24

Vue.js 路由参数 Query：详解清除参数和组件间参数传递

在 Vue.js 中，路由参数 Query 是一种在路由路径后使用问号 (?) 传递数据的有效方式。本博客将深入探讨 Query 的使用，重点介绍如何清除地址栏中的参数，以及如何在不同的路由组件之间传递参数。

清除地址栏中的参数

当您使用 Query 时，您可能会遇到需要从地址栏中清除参数的情况。这在用户点击浏览器的后退按钮时尤其重要，此时可能仍然显示上一个页面中的参数。以下两种方法可以帮助您清除地址栏中的参数：

使用 history.replaceState() 方法：

history.replaceState({}, '', location.pathname);

使用 Vue Router 的 replace() 方法：

this.$router.replace({ path: '/movies' });

将参数传递到不同的路由组件

当您需要在不同的路由组件之间共享数据时，可以考虑以下两种方法：

使用 Props：

使用 Props 可以直接在父组件中传递数据，并可以在子组件中接收它。

// 父组件
<router-link :to="{ path: '/movies', query: { page: 2, sort: 'desc' } }">
  Movies
</router-link>

// 子组件
<template>
  <div>
    <h1>Movies</h1>
    <p>Page: {{ $route.query.page }}</p>
    <p>Sort: {{ $route.query.sort }}</p>
  </div>
</template>

使用 Vuex：

Vuex 是一种状态管理库，它可以存储和管理组件之间的共享数据。

// store.js
export default new Vuex.Store({
  state: {
    movies: {
      page: 1,
      sort: 'asc'
    }
  },
  mutations: {
    setMoviesPage(state, page) {
      state.movies.page = page;
    },
    setMoviesSort(state, sort) {
      state.movies.sort = sort;
    }
  },
  getters: {
    getMoviesPage(state) {
      return state.movies.page;
    },
    getMoviesSort(state) {
      return state.movies.sort;
    }
  }
});

// 父组件
<router-link :to="{ path: '/movies' }">
  Movies
</router-link>

// 子组件
<template>
  <div>
    <h1>Movies</h1>
    <p>Page: {{ $store.getters.getMoviesPage }}</p>
    <p>Sort: {{ $store.getters.getMoviesSort }}</p>
  </div>
</template>