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 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变化

一件事用使用参数路由时要注意部分的是，当用户从/ user/foo导航到/ user/bar，相同的组件实例将被重用。由于两个路由都呈现相同的组件，因此这比破坏旧实例并创建新实例更高效。但是，这也意味着组件的生命周期钩子将不会被调用。

作出反应PARAMS在同一组件的变化，你可以简单地看$路由对象：

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