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

在这种情况下，组件是相同的，因此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
  }
}

Answer 2

可以在组件内调用路由器。实际上，通常您是从组件调用路由器的。

从提供的代码段中，一方面在代码中使用cn，另一方面，您使用cname。这可能就是为什么它永远无法为您工作的问题。

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

Vue路由器无法导航

2 个答案: