Vue中Router跳转打开新标签页

hpz1223

已于 2024-03-10 20:17:55 修改

阅读量2.8k

点赞数 11

分类专栏： # vue-router 文章标签： vue.js javascript 前端

于 2024-03-10 20:07:28 首次发布

本文链接：https://blog.csdn.net/qq_54140719/article/details/136607590

版权

vue-router 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了在Vue应用中，如何在Vue2.0之后使用编程式导航来在新标签页打开页面，重点讲解了从声明式导航到编程式导航的转变，以及利用`router.resolve()`方法实现目标窗口的处理。

摘要由CSDN通过智能技术生成

一、声明式导航

在标签内使用 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')
}