Vue中Router跳转打开新标签页
使用router.resolve打开新标签页
·
一、声明式导航
在标签内使用 target="_blank"
<router-link :to="{ path: '/new-page' }" target="_blank">打开新标签页</router-link>
二、编程式导航
在Vue中,在router.push({})或其他跳转方法中配置 target:"_blank"即可。
但是在Vue2.0后已经不支持 target="_blank"!
此时需要使用router中的resolve,该方法返回的对象中包含完整的路径信息,然后借助于window.open打开新的标签页,用法如下:
import { useRouter } from 'vue-router';
const router = useRouter()
const keyWord = ref(null)
const Seach = ()=>{
console.log(keyWord.value);
const routeUrl = router.resolve({
name:'search',
params:{
keyWord:keyWord.value
}
})
window.open(routeUrl.href,'_blank')
}
更多推荐
已为社区贡献2条内容
所有评论(0)