vue2升级vue3：vue2与vue3里vue-router如何实现跳转时打开新页面
Author：zhoulujun Date：
在vue2 vue-router 在新窗口打开页面的功能
<vue-link>标签实现新窗口打开
方文档中说 v-link 指令被 <router-link> 组件指令替代，且 <router-link> 不支持 target="_blank" 属性，如果需要打开一个新窗口必须要用<a>标签，但事实上vue2版本的 <router-link> 是支持 target="_blank" 属性的(tag="a")，如下：
<router-link target="_blank" :to="{path:'/home',query:{id:'1'}}">新页面打开home页</router-link>但这个模式，原来使用div写的，用这个替代，标签会变为a标签，需要处理超链接的样式问题
编程式导航
有些时候需要在单击事件或者在函数中实现页面跳转，那么可以借助router的示例方法，通过编写代码实现。我们常用的是 $router.push 和 $router.go 但是vue2.0以后，这种方式就不支持新窗口打开的属性了，这个时候就需要使用this.$router.resolve,如下：
const { href } = this.$router.resolve({
name: `print_schedule`,
params: {
id: id
}
});
window.open(href, "_blank");这个模式还是和原来的一样，封装一个方法统一处理即可
在vue3 vue-router 在新窗口打开页面的功能
vue-link 使用是一模一样的，其实编程式导航也是一样的
const router = useRouter();
const { href } = router.resolve({
path: '/pc/articleDetail',
query: {
article_id: utils.encryptCode({ 'article_id': article_id })
}
});
window.open(href, "_blank");其实就是Composition API 写的。
转载本站文章《vue2升级vue3：vue2与vue3里vue-router如何实现跳转时打开新页面》,
请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/vue3/8887.html