在项目开发中,产品给了这样一个需求:点击左侧子菜单,在浏览器中打开一个新的标签页,展示数据大屏。在此写个随笔记录下实现过程。
- 思路:使用编程式导航
- 实现页面跳转,我们常用的是 r o u t e r . g o , 但 是 V u e 2.0 以 后 , 这 种 方 式 不 支 持 新 窗 口 的 打 开 属 性 了 , 所 以 这 个 时 候 可 以 使 用 t h i s . router.go,但是Vue2.0以后,这种方式不支持新窗口的打开属性了,所以这个时候可以使用this.router.go,但是Vue2.0以后,这种方式不支持新窗口的打开属性了,所以这个时候可以使用this.router.resolve进行新窗口跳转
let url = this.$router.resolve({
path: '/byProductPacking',
query: {id: 123}
})
window.open(url.href, '_blank')
this.$router.go(-1)
// 可以使用query,也可以使用params
这样就实现了点击左侧子菜单,会打开一个新的浏览器标签页的功能,其中,使用this.$router.go(-1)的作用是:回到项目中,会回到上一次打开的页面。