beforeEnter 在同一路线上调用 router.push() 时不会触发导航守卫

Question

我的搜索引擎在搜索某些内容后尝试搜索其他内容时无法正确更新。

当我想搜索一些东西时，搜索组件中的搜索函数被调用：

function search() {
    const searchTerm = '/search=' + encodeURI(term.value.value)
    console.log('search', term.value.value, question, searchTerm)
    router.push(searchTerm)
}

我的 /search=:问题的 vue-router 如下：

  {
    path: "/search=:question",
    name: "search",
    component: SearchView,
    beforeEnter: async (to) => {
      await store.commit('setQuestion', to.params.question)
      console.log('beforeEnter', store.state.question)
      await store.dispatch('fetchSearchResult')
    }
  }

当我从 / 进行搜索时，它按预期工作，正如您从控制台中的消息中看到的那样：

search What is the meaning of life? undefined /search=What%20is%20the%20meaning%20of%20life? SearchComp.vue:25
beforeEnter What is the meaning of life index.js:32

除了当我从 /search=What%20is%20the%20meaning%20of%20life 进行搜索时，不会调用 beforeEnter 导航守卫，但 url 仍然更改为 searchTerm:

search How come Kropotkin looks like Santa? What is the meaning of life? /search=How%20come%20Kropotkin%20looks%20like%20Santa? SearchComp.vue:25

我尝试使用父路由和子路由进行设置，以强制 vue 在输入之前触发，但没有成功。

  {
    path: "/search",
    name: "search",
    children: [
      {
        path: ":question",
        name: "searchQuestion",
        component: SearchView,
        beforeEnter: async (to) => {
          await store.commit('setQuestion', to.params.question)
          console.log('beforeEnter', store.state.question)
          await store.dispatch('fetchSearchResult')
        }
      }
    ]
  }

我也尝试使用 beforeEach 但它不适合这个用例，因为我需要从后端获取东西。 我猜想 router.push() 并不是在 beforeEnter 之前触发的。如果是这种情况，我可能应该调用搜索，更新商店并使用 ref 强制更新我的组件，但如果可能的话，我宁愿使用 router.push 。

Answer 1

正如文档中所述：

beforeEnter

守卫仅在进入路线时触发，当

params

、

query

或

hash

发生变化时，它们不会触发。从 /users/2 到 /users/3 或从

/users/2#info

到

/users/2#projects

。它们仅在从不同路线导航时才会触发。

相反，在路线的

search

属性上放置一个观察者：

const route = useRoute()

watch(
  () => route.params.search,
  async (searchTerm) => {
      await store.commit('setQuestion', searchTerm)
      await store.dispatch('fetchSearchResult')
    }
)

这里有更详细的描述