javascript-如何在Vue路由器中使用addroutes方法？

我创建了一个函数“ 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
...

解决方法:

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

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

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

希望这可以帮助！

标签：vue-router,ecmascript-6,vue-js,javascript
来源： https://codeday.me/bug/20191025/1930454.html