Javascript VueJS和vue路由器：使用v-link时视图数据不更新

我正在尝试使用vue路由器的

v-link

在VueJS组件之间进行链接。单击链接时，URL会更新，但视图数据不会更新，除非手动刷新页面

此示例的一些上下文：一个巡更有许多巡更对象，巡更对象需要链接到上一个/下一个巡更对象

以下是表示巡更对象的路线：

'/tours/:tourId/objects/:objectId': {
    name: 'tourObject',
    component: tourObjectComponent
}

完整示例：

var-App=Vue.extend（{}）；
var tourObjectData=[
{id:“1”，name:“Object A”}，
{id:“2”，名称：“对象B”}，
{id:“3”，名称：“Object C”}，
{id:“4”，名称：“Object D”}，
{id:“5”，名称：“Object E”}，
];
var tourComponent=Vue.extend({
模板：“#组件”，
数据：函数（）{
返回{
对象：[]，
};
},
已创建：函数（）{
this.objects=tourObjectData；
},
});
var tourObjectComponent=Vue.extend({
模板：“#tourObjectComponent”，
数据：函数（）{
返回{
currendex:null，
对象：{}，
prevObject:{}，
下一个主题：{}，
};
},
已创建：函数（）{
this.currendex=this.getCurrendex（）；
this.currObject=this.getCurrObject（）；
this.prevObject=this.getPrevObject（）；
this.nextObject=this.getNextObject（）；
},
方法：{
//获取巡更对象中的当前对象索引
getCurrIndex:函数（）{
对于（var i=0；i0？
该索引-1：
tourObjectData.length-1；
返回tourObjectData[prevIndex]；
},
//获取下一个对象
getNextObject:函数（）{
var nextIndex=this.currendex

游览


{{name}}


回到巡回赛
{{currObject.name}

上一个巡更对象：{prevObject.name}
下一个巡更对象：{{nextObject.name}

来自（以及gitter频道@svevil的帮助）：

此外，您还可以使用
computed
属性，如下所示：


var-App=Vue.extend（{}）；
var tourObjectData=[
{id:“1”，name:“Object A”}，
{id:“2”，名称：“对象B”}，
{id:“3”，名称：“Object C”}，
{id:“4”，名称：“Object D”}，
{id:“5”，名称：“Object E”}，
];
var tourComponent=Vue.extend({
模板：“#组件”，
数据：函数（）{
返回{
};
},
计算：{
对象：函数（）{
返回数据；
}
},
});
var tourObjectComponent=Vue.extend({
模板：“#tourObjectComponent”，
数据：函数（）{
返回{
currendex:null，
对象：{}，
prevObject:{}，
下一个主题：{}，
};
},
计算：{
currIndex:函数（）{
对于（var i=0；i0？
该索引-1：
tourObjectData.length-1；
返回tourObjectData[prevIndex]；
},
nextObject:function（）{
var nextIndex=this.currendex

游览


{{name}}


回到巡回赛
{{currObject.name}

上一个巡更对象：{prevObject.name}
下一个巡更对象：{{nextObject.name}

对于vuejs^2，您可以观察路由并触发如下更改（在我的情况下，我的用户路由中有username参数）：

从文档中可以看出，这太棒了。我一直在寻找为什么我的观点没有随着路线而更新。感谢您提供了一个更具体的使用示例
route: {
    data(transition) {
        transition.next(DataObjectForCurrentRoute);
    }
}

watch:{
    '$route' (to, from) {
        if (to.params.username !== from.params.username) {
            //update whatever
        }
   }
},