如何在Vue-router中使用addroutes方法？

Question

我创建了一个函数“ addroute（）”来动态添加路由，但是它不起作用（路由器未更改）。这是使用addRoutes方法的正确方法吗？我从教程中学到了这一点。如果没有，那么给我一个正确的例子，谢谢！

...
const Bar={
    template:'#panels',
    data(){
        return {title:'badss'}          
    }
        };
const Foo={
    template:"#panels",
        data(){
        return {title:'hell'}
    }
        };


const router = new VueRouter({
  routes:[
      {path:'/foo',component:Foo},
      {path:'/bar',component:Bar}
  ]
});

new Vue({
    el:'#root',
    router:router,
    data:{
    stats:stats
},
methods: {
    //
},

});

function addroute(){//watch here
    router.addRoutes([{path:'/ioio',component:{template:'#panels'}}])
}
setInterval("addroute()", 2000)//watch here
...

Answer 1

您要更改的路由器实例已添加到您拥有的Vue实例中。更改该路由器不会更新Vue实例。您要做的是调用已添加到Vue实例的路由器实例。可以在以下位置找到完整的工作示例：在vue-router中添加路由

因此，您可以使用在Vue实例中的方法内部访问路由器this.$router。然后，您可以使用该.addRoutes功能添加要添加的所需路线。

在小提琴中，您可以看到我已经在HTML中添加了ioio链接，但是它尚不起作用（单击它将导致<span>Default</span>被添加到中<router-view></router-view>）。单击按钮时，您正在添加新路线。我添加了，this.$router.push('/ioio');以<router-view></router-view>在添加路由后强制进行更新。如果删除此行代码，<router-view></router-view>将会显示最后显示的元素（在大多数情况下是理想的），再次单击ioio按钮将显示新创建的路线。

希望这可以帮助！