一、声明式导航
在标签内使用 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')}