1.vue带参数跳转打开新页面
this.$router.push
跳转到指定URL,向history栈添加一个新的记录,点击后退会返回至上一个页面
场景如下:点击首页的某一条任务的详情按钮,在当前页面打开任务详情页面,关闭详情弹框后返回首页
代码如下
<span @click="watchDetail(scope.row)">详情</span>// 本页面跳转到详情watchDetail(item) {this.$router.push({path: '/smart/planned',query: {from: '/'}});}// 点击关闭回到首页handleDetailClose() {if (this.$route.query.from) {this.$router.push({path: this.$route.query.from});} else {....}},
注意:想要实现上述场景,还要配置vuex
2.vue带参数跳转打开新窗口
this.$router.resolve
跳转到指定URL,并打开一个新的窗口
场景:点击更多,打开一个新窗口
代码如下:
<el-button @click="showMoreWarn()">更多</el-button>showMoreWarn() {const {href } = this.$router.resolve({path: '/publicWarnTable',query: {starttime: ...,endtime: ...,type: ...,sender: ...}});window.open(href, '_blank');},
路径
{path: '/publicWarnTable',component: () => import('@/views/warn/publicWarnTable'),// component: resolve => require(['@/views/warn/publicWarnTable'], resolve),name: 'xxx平台',hidden: true},