Vue中Router跳转打开新标签页

一、声明式导航

在标签内使用 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')}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容