在路由更改 VueJS 上运行突变？

Question

所以我正在使用 Vuex 并设置了一个简单的突变设置，该控制台记录一条消息。我有两条路线设置，/ 转到我的 HelloWorld 组件，/another 转到 AnotherWorld 组件。我正在尝试在我的route 上设置一个watch，以便当路线改变时，它会触发突变。我确实设置了watch，但它似乎并没有触发我的突变。

看看这个CodeSandbox。

查看代码 sn-p:-

这是我的 Vuex 商店：-

  mutations: {
    routeChange() {
      console.log("Helloooo!!!!!");
    }

这是我的 Hello World 组件：-

<template>
  <div>
    <h1>Hello World!!!</h1>
    <router-link to="/another">Switch</router-link>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  watch: {
    $route(to, from) {
      this.$store.commit("routeChange");
    }
  }
};
</script>

这是我的另一个世界组件：-

<template>
  <div>
    <h1>Another World</h1>
    <router-link to="/">Back</router-link>
  </div>
</template>

<script>
export default {};
</script>

如您所见，我已经设置了手表，但它似乎没有做任何事情。任何帮助将不胜感激。谢谢。

Answer 1

如果您将观察者放在单独的路由组件中，它们将永远不会触发，因为 $route 在这些组件实例化之前设置，然后在这些组件销毁后更改。

您要么需要将手表放在 App.vue（<router-view> 的父级）中，要么从 vue-router 守卫之一（https://router.vuejs.org/guide/advanced/navigation-guards.html）提交

Answer 2

我会在你的路由器中使用global after hook 导航守卫。

例如

// router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '../store'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [...]
})

router.afterEach(() => {
  store.commit('routeChange')
})

export default router

---

如果您只想捕捉远离某些组件的路线导航，您可以使用beforeRouteLeave in-component guard

// MyComponent.vue

export default {
  name: 'MyComponent',
  beforeRouteLeave (to, from, next) {
    this.$store.commit('routeChange')
    next()
  }
}