vue-router新窗口打开页面

版权声明：每次关键时刻我都会掉链子，我知道重要时刻我都会发挥失常，所以我会付出150%的努力，即使只能发挥60%水平，也能拿到90分！ https://blog.csdn.net/qq_16371909/article/details/82801617

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