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 iself。仅当从其他组件单击而不是从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/

Answer 2

如果使用动态路线，则会重复使用相同的组件。

这是一个添加到craig_h的答案的参考： https://router.vuejs.org/en/essentials/dynamic-matching.html

查看对Params更改做出反应

部分

使用带有params的路由时要注意的一点是，当用户从/ user / foo导航到/ user / bar时，将重用相同的组件实例。由于两个路由都呈现相同的组件，因此这比销毁旧实例然后创建新实例更有效。但是，这也意味着不会调用组件的生命周期钩子。

要对同一组件中的params更改做出反应，您只需观察$ route对象：

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // react to route changes...
    }
  }
}

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

2 个答案: