最近在写后台管理系统,遇到一个需求,就是点击某一项,跳转详情页面,此详情页面需要是浏览器的新窗口。
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,
},
},
完成!!!