VUE3(二十一)vue-router 在新窗口打开页面的功能

简介: 新窗口打开标签页这个功能在html中还是很简单的。添加Target=”__blank”就好。

QQ图片20220423175929.jpg

新窗口打开标签页这个功能在html中还是很简单的。添加Target=”__blank”就好。

但是在vue中怎么实现呢?


其实很简单:


VUE2:


const { href } = this.$router.resolve({
        name: `print_schedule`,
        params: {
          id: id
        }
      });
      window.open(href, "_blank");


VUE3:


const router = useRouter();
const { href } = router.resolve({
                path: '/pc/articleDetail',
                query: {
                    article_id: utils.encryptCode({ 'article_id': article_id })
                }
            });
            window.open(href, "_blank");


上边大概展示了其在VUE2和VUE3中使用的方法。



目录
相关文章
|
3天前
|
开发工具 git
vite+vue3+ts从0到1搭建企业级项目(4)
vite+vue3+ts从0到1搭建企业级项目
21 0
|
3天前
|
存储 JavaScript API
vite+vue3+ts从0到1搭建企业级项目(3)
vite+vue3+ts从0到1搭建企业级项目
16 0
|
3天前
|
资源调度 JavaScript 前端开发
vite+vue3+ts从0到1搭建企业级项目(2)
vite+vue3+ts从0到1搭建企业级项目
14 1
|
3天前
|
资源调度 JavaScript 测试技术
vite+vue3+ts从0到1搭建企业级项目(1)
vite+vue3+ts从0到1搭建企业级项目
32 0
|
2天前
|
JavaScript
|
3天前
|
存储 JavaScript API
Vue状态管理深度剖析:Vuex vs Pinia —— 从原理到实践的全面对比
Vue状态管理深度剖析:Vuex vs Pinia —— 从原理到实践的全面对比
11 2
|
5天前
|
JavaScript 前端开发 测试技术
使用 Vue CLI 脚手架生成 Vue 项目
通过 Vue CLI 创建 Vue 项目可以极大地提高开发效率。它不仅提供了一整套标准化的项目结构,还集成了常用的开发工具和配置,使得开发者可以专注于业务逻辑的实现,而不需要花费大量时间在项目配置上。
60 7
使用 Vue CLI 脚手架生成 Vue 项目
|
6天前
|
JavaScript 算法
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
8 1
|
6天前
|
JavaScript
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
15 1
|
8天前
|
JavaScript 前端开发 Java
【vue实战项目】通用管理系统:作业列表
【vue实战项目】通用管理系统:作业列表
22 0