在路由更改 VueJS 上運行突變？

Question

所以我正在使用 Vuex 並設置了一個簡單的突變設置，該控制台記錄一條消息。 我有兩個路由設置， /去我的 HelloWorld 組件和/another去另一個世界組件。 我正在嘗試在我的route上設置一個watch ，以便當路線改變時，它會觸發突變。 我確實設置了一塊watch ，但它似乎並沒有觸發我的突變。

看看這個CodeSandbox 。

查看代碼片段：-

這是我的 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

我會在您的路由器中使用全局后掛鈎導航防護。

例如

// 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 保護

// MyComponent.vue

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