在路由中导航时保留参数

Question

如何在路由中导航时保留参数。 parameter/parameters 必须在应用程序的每个页面中（不仅在嵌套路由中）。在 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

如何在我导航的每条路线中保留参数 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' ? 'do this' : 'do that';

提前致谢！

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，当您创建视图时，它会将完整路径添加到一个数组中，您稍后可以通过注入、检查等方式做出决定。

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

在路由中导航时保留参数

Keep params while navigating through routes

javascript

vue.js

vue-router