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
},