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中使用的方法。



目录
相关文章
|
5天前
|
JavaScript API
Vue3 基础语法
该内容介绍了Vue项目的创建和Vue3的语法、响应式API、生命周期、组件通信及跨组件通信方法。包括使用`npm init vue@latest`创建项目,`npm install`初始化,Vue3的`setup`语法,`reactive`、`ref`、`computed`和`watch`的用法,生命周期图解,以及父子组件间的数据传递。此外,还提到了Vue3中使用`provide`和`inject`进行跨层数据传递,以及通过Pinia库进行状态管理。
28 0
Vue3 基础语法
|
8天前
|
JavaScript 定位技术 API
在 vue3 中使用高德地图
在 vue3 中使用高德地图
14 0
|
9天前
vue3 键盘事件 回车发送消息,ctrl+回车 内容换行
const textarea = textInput.value.textarea; //获取输入框元素
23 3
|
11天前
|
JavaScript 前端开发 CDN
vue3速览
vue3速览
26 0
|
11天前
|
设计模式 JavaScript 前端开发
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
|
存储 JavaScript 网络架构
Vue3新增功能特性
Vue3相比Vue2更新技术点
|
2天前
|
JavaScript 前端开发 C++
【Vue】Vue快速入门、Vue常用指令、Vue的生命周期
【Vue】Vue快速入门、Vue常用指令、Vue的生命周期
12 2
|
4天前
|
存储 缓存 JavaScript
谈谈你对vue的了解
谈谈你对vue的了解
14 3
|
4天前
|
JavaScript API
Vue axjx 跨域请求
Vue应用中解决跨域问题可通过配置代理服务器。方法一是设置`devServer.proxy`到目标服务器端口,如`http://localhost:3000`,然后使用axios发送请求。方法二是为多个代理配置,如`/api`和`/api2`,分别指向不同端口,利用`pathRewrite`重写路径。请求时需加上相应前缀,如`/api/index`。
13 1
|
5天前
|
JavaScript 前端开发 Java
JavaSE精选-Vue
JavaSE精选-Vue
7 1