首页 前端知识 Vue中Router跳转打开新标签页

Vue中Router跳转打开新标签页

2024-04-29 11:04:37 前端知识 前端哥 346 730 我要收藏

一、声明式导航

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/6196.html
标签
评论
发布的文章

@JsonCreator和@JsonValue

2024-05-05 22:05:05

Python 字符串转换为 JSON

2024-05-05 22:05:00

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!