如何使用 vue & 在路由之间保持某些状态Vue路由器 [英] How persist some state between routes with vue & vue-router

问题描述

我有一个包含在

SearchPage -> ...Others or SearchPage -> ...Others or SearchPage ->

并且想要在导航回时保留搜索字符串是什么.

and wanna persist what was the search string when navigate back.

<template id="ListCustomersPage">
<q-layout>
  <q-layout-header>
    <toolbar :title="title" :action="doCreate" label="New"></toolbar>
    <q-search inverted placeholder="Type Name, Code, Nit, Phone Number or Email" float-label="Search" v-model="search" />
    <q-btn icon="search" color="secondary" @click="doSearch" />
  </q-layout-header>
</q-layout>
</template>

现在，问题是当用户可以导航到其他地方时，如何将查询堆栈与路由器之一相关联.

Now, the problem is how correlate the stack of the queries and the one of the routers, when the fact the user can navigate elsewhere.

P.D 全部都在一个页面中.如果可以保持屏幕而不刷新它们(但仅用于搜索页面直到弹出)会更好.

P.D All is in a single page. If possible to persist the screen without refresh them (but only for the search pages until popped back) will be better.

推荐答案

Option 1: Navigation Guards

您可以使用所谓的导航守卫，它允许您在路由更新之前、之后和之后添加全局操作.您还可以使用 将其直接添加到您的组件中组件内保护，这将允许您保留search 数据的内容.

Option 1: Navigation Guards

You can use a so called Navigation Guard that allows you to add global actions before, after and on route updates. You can also add it directly to your component by using the In-component Guards, which will allow you to persist the content of the search data.

const VueFoo = {
   // I guess your search attribute is in your data
    data() {
      return {
        search: ''
      }
  },
  mounted() {
      // retrieve your information from your persistance layer
  },
  beforeRouteLeave (to, from, next) {
    // called when the route that renders this component is about to
    // be navigated away from.
    // has access to `this` component instance.

     // persist this.search in localstorage or wherever you like it to be stored
  }
}

选项 2:使用(Vuex)商店

如果您能够添加 Vuex Store 或任何类似的 Store，我强烈建议您这样做.由于您标记了类星体，我想链接到提供的 Vuex 商店文档那里.您基本上可以将您的 search 属性外包，让 Store 为您在整个应用程序中保留它.

Option 2: Using a (Vuex) Store

If you're able to add a Vuex Store or any Store alike, I would highly recommend to do so. Since you tagged quasar I want to link to the Vuex Store Documentation provided there. You can basically outsource your search property and let the Store persist it for you across your application.

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    search_term: ''
  },
  mutations: {
    SET_SEARCH_TERM (state, payload) {
      state.search_term = payload.search_term
    }
  },
  actions: {
    SEARCH ({ commit, state }, payload) {
      commit('SET_SEARCH_TERM', payload.search_term)

      // your api call to search which can also be stored in the state
    }
  }
})
export default store

在您想要使用突变(不绑定到操作)保留搜索查询的组件中:

In your component where you want to persist your search query using a mutation (not bound to an action):

store.commit('SET_SEARCH_TERM', {
  search_term: this.search // your local search query
})

在你的代码中，如果你想在每次搜索期间都坚持下去，你会触发搜索 ACTION

In your code where you trigger the search ACTION if you want to persist during every search

store.dispatch('SEARCH', {
  search_term: this.search
})

访问属性 search_term 或您想调用它的任何方式都可以使用计算属性来完成.你也可以直接绑定状态和突变，完全不需要导航守卫:

Accessing the property search_term or however you want to call it can be done using a computed property. You can also bind the state and mutations directly without the need for Navigation guards at all:

// your Vue component
computed: {
  search: {
    get () {
      return this.$store.state.search_term
    },
    set (val) {
      this.$store.commit('SET_SEARCH_TERM', { search_term: val })
    }
  }
}

使用前请务必了解基本概念:https://vuex.vuejs.org/

Make sure to learn about the basic concept before using: https://vuex.vuejs.org/

这篇关于如何使用 vue & 在路由之间保持某些状态Vue路由器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！