antd 框架：点击链接重开浏览器页面——基础积累

最近在写后台管理系统，遇到一个需求，就是点击某一项，跳转详情页面，此详情页面需要是浏览器的新窗口。

1.浏览器新开页面:window.open(xxx)

通过window.open(xxx)的方式可以打开浏览器的新窗口。

2.页面布局:layouts布局

目前antd框架中的所有页面都是layouts布局，就是有左侧菜单部分，顶部标签部分。但是如果是新开的页面，则最好不要有左侧菜单和顶部标签部分，否则会感觉是同一个系统，而非是一个单开的页面。

相比较而言，最上面的新开页面才是我们想要的。

因此，此时需要在路由上单独处理需要新开的页面。

3.单独定义路由：不继承父级路由的layouts布局

单独定义的路由如下：

 {
    
    
    path: "orderMainNew",
    name: "元器件订单信息",
    component: () =>
        import ("@/pages/orderManagement/orderMain"),
},

4.在新开的页面中:activated方法不生效，需要用watch来监听路由变化

由于antd框架中有使用keep-alive缓存，则如果想要在路由不变化，仅参数改变时，触发页面接口更新的话，则可以使用activated来更新，但是经过测试，通过window.open()打开的新页面是无法触发activated的，则此时可以通过watch监听路由的变化，从而触发详情接口的更新。代码如下：

 watch: {
    
    
    "$route.query.id": {
    
    
      handler(newVal) {
    
    
        console.log("监听到id变化");
        this.id = newVal;
        this.getDetail();
      }
      immediate: true,
    },
  },

完成！！！