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 地址将在浏览器中更新。我看到带有路由信息的正确控制台日志

但是page/content不会改变。

更新 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

路由器可以在组件内调用就好了。实际上，你通常从组件中调用路由器。

根据提供的代码片段，您在代码中的某一处使用 cn，然后在另一处使用 cname。这可能就是为什么它永远不适合你的问题。

我创建了一个 codesandbox 来重新创建您的场景，除了上面提到的次要命名之外，一切似乎都很好。

Answer 2

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

的地方

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

另一种选择是通过观察者对 $route 中的变化做出反应：

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

Vue 路由器不导航

Vue router not navigating

vue.js

vue-router

vuejs2