Vue 中$router.push打开新窗口

最新推荐文章于 2025-04-08 10:27:06 发布

@三块五毛

最新推荐文章于 2025-04-08 10:27:06 发布

阅读量1.5w

点赞数 14

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_43137834/article/details/128574554

版权

文章讲述了在Vue应用中，如何利用this.$router.push进行路由跳转并新开窗口，通过this.$router.resolve方法结合window.open实现。同时，提到在接收查询参数时可能遇到的问题以及解决方案，包括对null值的处理，并给出了具体项目实例代码，涉及动态导入组件和设置路由元信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vue中使用 this.$router.push（{ path:  '/home' }） 
默认是替代本窗口
如果想新开一个窗口，可以使用下面的方式：


let routeData = this.$router.resolve({ path: '/home', query: { id: 1 } });
window.open(routeData.href, '_blank');

获取参数：
直接在被跳转的页面：this.$route.query.addflg;

如果单独加载这个列表，this.$route.query.addflg 会报错，那么就在 var t=this.$route.query?this.$route.query.addflg:'', 做个判断

如果要跳转到其他列表对应的弹框  可以直接 跳的对应的列表页面， 判断 直接调用对应的方法

项目实例：

//  this.$router.push({path:'/web/MMS/StockOut/OutBound', query: {}});

                                let routeData = this.$router.resolve({
                                    path: "/web/MMS/StockOut/OutBound",
                                    name: "OutBound",
                                    meta: {
                                        title: "出库单",
                                    },
                                    component: () =>
                                        import(
                                            "@/views/MaterialReceiving/OutBound/index.vue"
                                        ),
                                });
                                window.open(routeData.href, "_blank");

                                // this.$router.push({
                                //     path: "/web/MMS/StockOut/OutBound",
                                //     name: "OutBound",
                                //     meta: {
                                //         title: "出库单",
                                //     },
                                //     component: () =>
                                //         import(
                                //             "@/views/MaterialReceiving/OutBound/index.vue"
                                //         ),
                                // });