大家好，欢迎来到IT知识分享网。
vue的是单页面应用设计的渐进式框架,但是有时在项目中也会出现新窗口打开页面的情况,此时,就需要vue-router的知识来解决
一.使用标签
需要注意的是,router-link并不支持 target=”_blank” 属性,所以需要tag=”a”属性把router-link渲染成标签
详情页
二.使用编程式导航
有些时候需要在单击事件或者在函数中实现页面跳转，那么可以借助router的示例方法，通过编写代码实现。我们常用的是
router.go,但是vue2.0以后，这种方式就不支持新窗口打开的属性了,
1.使用 $router.resolve 这种方法能够实现新窗口打开, isService是事件调用
isService(val) {
const params = { id: val };
let routeData = this.$router.resolve({
name: “List”,
query: params,
});
window.open(routeData.href, ‘_blank’);
}
2.使用 $router.resolve带参数在新窗口打开
isService(val) {
const params = { id: val };
let routeData = this.$router.resolve({
path: `/details/${val}`,
query: params
});
window.open(routeData.location.path, “_blank”);
}
新窗口的接收参数方法
created() {
if (this.$route.params) {
this.active = this.$route.params.id;
this.init();
}
},
watch: {
$route(to, from) {
//监听路由是否变化
if (to.params.id != from.params.id) {
this.active = to.params.id;
this.init();//重新加载数据
}
}
},
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/14575.html
