routes - vue.js 上的动态路由器链接不起作用

Question

我正在拉我的最后一缕头发。请问我错过了什么？

单击时每个链接都正确显示在地址栏上，但页面未加载或路由。之后刷新显示正确的页面。

[路线] `

import eachPost from './components/eachPost.vue';
{ path: '/eachPost/:id', component: eachPost }

[组件]

<router-link :to="'/eachPost/' + post.p_id" v-for="(post,i) in posts" 
:key="i" exact>{{ post.header }}</router-link>

`

路由器链接列表显示在每个组件上，包括 eachPost.vue 本身。只有当从其他组件而不是从 eachPost.vue 组件单击时，页面才会被路由。

Answer 1

好的，我想我明白你的问题了。您需要观察参数更改的路径(我知道，这不是 Vue 最直观的功能之一!)。因此，在您的基础组件中，您需要执行以下操作:

watch: {
  '$route' (to, from) {
    // Whatever you need to change route
  } 
}

这里的问题是组件不会被重新渲染，所以如果你在创建元素时获取数据，那么当路由改变时需要调用相同的方法。这是一个基本示例:

{
  template: '<div>{{message}}</div>',
  created() {
    this.setMessage();
  },
  methods:{
    setMessage(){
      this.message = 'Bar ' + this.$route.params.id;
    }
  },
  watch: {
    '$route' (to, from) {
      this.setMessage();
    }
  },
  data() {
    return {
      message: ''
    }
  }
}

我在这里所做的只是在路由更改时更改消息，您可以在这个 JSFiddle 上看到它的实际操作:https://jsfiddle.net/unrm8tcL/