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日,中秋假期即将到来的最后一个工作日,于我而言,能解决问题让我准点下班回家的方法就是好方法。是世界上最美好的代码实现!
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐