Vue 路由器无法导航

Question

我在让 VueRouter 导航时遇到问题。在我的应用程序中，一些页面工作正常，并且使用相同的代码，其他页面路由不起作用/页面不更新导航。

路由器有问题吗？就像你不能从组件内部调用路由器一样，或者......？

我的应用程序中的命名路线

export default new VueRouter({
  routes: [
    {
      path: '/grams/one/:cname',
      component: GramsOne,
      name: "gramsOne"
    },
  ...

然后在页面上的组件内：

<q-btn v-for='(rel, key) in gram.relatedItems' :key='key'
  color='secondary'
  @click="goGram(rel)"
  >
  {{rel.cn}}
</q-btn>


// later in the script:

  methods: {
    goGram(gram) {
      let newRoute = {
        name: 'gramsOne',
        params: {cname: gram.cname}
      }
      console.log('goGram', newRoute)
      this.$router.push(newRoute)
    }
  },

在同一页面的其他地方，简单的路由工作。URL 地址将在浏览器中更新。我看到带有路由信息的正确控制台日志

但页面/内容不会改变。

更新 URL 栏后，我可以按 ctrl-R 并加载新页面。所以目标路线工作正常。

从同一个应用程序中的其他页面，我可以使用相同的路线来定位新目的地并正常加载。

这也加载了相同的 URL，只是导致问题的查询参数不同。

/app/items/foo /app/items/bar

哪里bar是某种属性的类型/app/items/:foo

我尝试了命名路由、路由使用等的各种组合，但看不到模式。

"vue": "~2.5.0",
"vue-resource": "^1.3.4",
"vue-router": "^2.7.0"

感谢任何提示！

Answer 1

本例中的 Component 是相同的，因此 vue 会重用该实例。该this.$route组件中会发生变化，但是created()，beforeMounted()和mounted()钩不会callled。
这可能是您使用this.$route.params.cname

要强制 vue 创建一个新的组件实例，您可以在类似上设置一个唯一键 <router-view :key="$route.fullPath">

另一种选择是$route使用观察者对变化做出反应：

watch: {
  "$route.params.cname": {
    handler(cname) {
      // do stuff
    },
    immediate: true
  }
}