vue+ts+router实现单页面打开新窗口,不显示侧边栏问题(返回上一页,保留数据)

摘要:
1.单击单个页面打开详细信息页面以打开新窗口constparam:any={id:row.REAIC_INFO_id,categoryCode:row.CCATEGORYID,classCode:row.ClassID,reliCode:row.REICCODE,};常见的路由跳转方法是$router.push({path:'objectDetail',query:param});替换为一个

1. 单页面点击打开详情页为新窗口打开

  

const param :any ={
id:row.RELIC_INFO_ID,
categoryCode : row.CATEGORYID,
classCode : row.CLASSID,
reliCode:row.RELICCODE,
};

把普通的路由跳转方式:
this.$router.push({path: 'objectDetail',query:param});

更换成一下方法:

let routeData = this.$router.resolve({
name: "objectDetail", // 要跳转的路径的名称
query: param, // 跳转要携带的参数
params:{catId:param.catId} // 可以不写
});

window.open(routeData.href, '_blank');

2. 新窗口打开去掉侧边栏

思路: 在写侧边栏的页面,加一个标识,监听路由变化,如果路由是要打开的新窗口的路由,则标识为true, 理由v-if 决定是否创建侧边栏组件

vue+ts+router实现单页面打开新窗口,不显示侧边栏问题(返回上一页,保留数据)第1张

免责声明:文章转载自《vue+ts+router实现单页面打开新窗口,不显示侧边栏问题(返回上一页,保留数据)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇qemu无界面启动,并重定向输出到终端kubernetes-v1.20.4 二进制部署-flannel-v0.13.0下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

NVR硬件录像机web无插件播放方案功能实现之相关接口注意事项说明

该篇博文主要用来说明EasyNVR硬件录像回放版本的相关接口说明和调用的demo; 方便用户的二次开发和集成。 软件根目录会包含接口文档的,因此,本文主要是对一些特定接口的说明和接口实现功能的讲解以及部分demo的展示说明; 对应接口说明; 支持设备类型 由于获取NVR录像机的相关功能是通过SDK来实现功能的,因此,无法想EasyNVR配置摄像机一样,走...

vue 2.0 + elementUI 实现面包屑导航栏

Main.js 9种响应式面包屑导航和分步导航指示器UI设计 ``` var routeList = []; router.beforeEach((to, from, next) => { var index = -1; for(var i = 0; i < routeList.length; i++) { if(routeList[i].na...

vue项目中监听sessionStorage值发生变化

首先在main.js中给Vue.protorype注册一个全局方法, 其中,我们约定好了想要监听的sessionStorage的key值为’watchStorage’, 然后创建一个StorageEvent方法,当我在执行sessionStorage.setItem(k, val)这句话的时候,初始化事件,并派发事件。 1 Vue.prototype.re...

celery redis rabbitMQ各是什么及之间的区别?

Celery:  Celery是基于Python开发的分布式任务队列。它支持使用任务队列的方式在分布的机器/进程/线程上执行任务调度。  1、 celery工作流程: 消息中间件(message broker):Celery本身不提供消息服务,但是可以方便的和第三方提供的消息中间件集成。包括,RabbitMQ, Redis, MongoDB ,SQLAl...

Qt 访问网络

一、前言 Qt 中访问网络使用 QNetworkAccessManager,它的 API 是异步的,这样在访问网络的时候不需要启动一个线程,在线程里执行请求的代码。(但这一点在有时候需要阻塞时就是个麻烦了) 需要注意一点的是,请求响应的对象 QNetworkReply 需要我们自己手动的删除,一般都会在 QNetworkAccessManager::fin...

vue组件实现简单的路由

首先在当前项目下安装依赖包,运行npm install  vue-router  则package.json中添加了vue-router 此时在src 下的index.js主程序中引入vue-router,同时告诉Vue使用此路由配置 1 import VueRouter from "vue-router" 2 Vue.use(VueRouter); 在i...