vue-router新窗口打开页面
vue、vue-Router是用来做单页面应用的,有的时候需要打开新页面用户体验才好,比如(点击图片进入放大模式):这时候打开新页面浏览这个订单详情很明显比较合适(杠精走开)。总结了一下,Vue项目使用Vue-router打开新页面的时候一共有如下几种方法,分别适用不同的场景:1.在template中,直接给它加上target='_blank'属性即可,反正最终它也会被解释为一个a标签&a
vue、vue-Router是用来做单页面应用的,有的时候需要打开新页面用户体验才好,比如(点击图片进入放大模式):
这时候打开新页面浏览这个订单详情很明显比较合适(杠精走开)。
总结了一下,Vue项目使用Vue-router打开新页面的时候一共有如下几种方法,分别适用不同的场景:
1.在template
中,直接给它加上target='_blank'
属性即可,反正最终它也会被解释为一个a标签
<router-link to='./home' target='_blank></router-link>
2.在render
函数中:
2.2也许你会好奇为啥2.2在2.1前面,因为我现在知道正确简洁的方法了(配置attrs属性即可)。
//生成一个div包裹起来的router-link标签,Vue的render方法
render: (h, params) => {
return h('div', [
h('router-link', {
props: {
to: './orderdetail',
},
attrs: {
target: '_blank',
},
}, '订单详情')
])
}
2.1当你用ivew的table组件,要用vue的render方法生成表格内容的时候,你会发现在props里面写target是没用的,无论你生成a
标签或者是生成router-link
标签(这是我以前的无知想法,但我不删,你们可以不用继续看,实际上给他们配置attrs的target属性即可),都只能在当前页面打开,后来我灵机一动,我生成的是按钮,但是给他绑定了点击事件,看下面代码。
//vue的data选项
data(){
return {
//万恶的iview表格数据来源
columns: [{
title: '操作',
key: 'action',
render: (h, params) => {
return h('div', [
/*这里生成'a'或者'router-link',在props里面加上target没有作用,
所以我选择生成iview自带按钮组件,在其click时间里面做文章*/
h('Button', {
props: {
type: 'text',
size: 'small'
},
on: {//这里绑定点击事件模拟超链接的行为
click: () => {
const link = "./orderdetail/" + params.row.orderId;//目标地址
window.open(link, '_blank');//新窗口打开
}
}
}, '订单详情')
])
}
}]
}
}
3.掌握核心思想,想要在新窗口打开页面,点击的是什么标签并不重要,重要的是给其绑定好事件,利用window.open()
方法,传入新页面的地址以及特征参数_blank
即可完成骚操作。
示例:window.open('http://iscoser.com','_blank')
。
也许随着Vue和Vue-Router的发展,以后会有更好的方法,2018年9月21日,中秋假期即将到来的最后一个工作日,于我而言,能解决问题让我准点下班回家的方法就是好方法。是世界上最美好的代码实现!
更多推荐
所有评论(0)