javascript - 在路由中导航时保留参数

Question

如何在路由中导航时保留参数。参数/参数必须在应用程序的每个页面中(不仅在嵌套路由中)。在 Angular 上，我可以使用 this._router.navigate([''], { queryParamsHandling: 'merge' }) 来做到这一点，但是如何使用 vue.js 来做到这一点？

基本路线示例:

// base route 1 -> http://example.test/?user_code=1234&member=false
// base route 2 -> http://example.test/?user_code=56789&member=false
// base route 3 -> http://example.test/?user_code=4321

如何在我导航的每条 route 保留参数 user_code 和 member？

我想要的例子

// navigated route 1 -> http://example.test/about?user_code=1234&member=false
// navigated route 2 -> http://example.test/whatever_page?user_code=56789&member=false
// ...

为什么我需要这个？因为那时我将需要参数来在应用程序中执行操作 Ex: this.$route.query.user_code == '1234' ？ '做这个' : '做那个';

提前致谢!

Answer 1

典型的方法是使用状态并将路由的完整路径推送到该状态属性(可能是数组)。

使用 vuex:

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    paths: []
  },
  mutations: {
    PUSH_PATH (fullPath) {
      paths.push(fullPath)
    }
  },
  actions: {
    pushPath(commit, fullPath) {
       commit("PUSH_PATH", fullPath)  
    }
  } 
})

// in a component
import { mapActions } from "vuex";
...

  methods: {
    ...mapActions("pushPath")
  },
  created() {
    this.pushPath(this.$route.fullPath)
  }

现在，如果您使用 pushPath，当您的 View 被创建时，它会将 fullPath 添加到一个数组中，您稍后可以通过注入(inject)、检查等方式做出决定。

另一种流行的选择，尤其是在根据路线做出决策时，是使用“Navigation Guards”。这些是拦截路线并允许您执行某些操作的功能。此处提供更多详细信息:https://router.vuejs.org/guide/advanced/navigation-guards.html