[英]How to use addroutes method in Vue-router?
我创建了一个函数“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实例的路由器实例。 可以在以下位置找到完整的工作示例: 在vue-router中添加路由
因此,您使用this.$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按钮将显示新创建的路径。
希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.