每日一篇（5）--打开新页面的方式

打开新页面有多种方式，以下会详细介绍

• 关于js基础的window打开方式

//window.open打开方式
window.open("http://www.baidu.com/", "_blank");//这是在新窗口打开
window.open("http://www.baidu.com/", "baidu");//这是在新窗口打开且赋值名称--同名称下只能打开一次

• jump打开方式

第一种方式：
<el-button @click='$jump('这个是路由的name',{id:this.id,name:this.name})'>打开新页面</el-button>
//{}内是所需要传的参数
//另一个页面需要接收参数:this.parentParam
//console.log(this.parentParam) 可以打印出parentParam下所有的值
第二种方式：
<el-button @click='openPage'></el-button>
//事件的方式
openPage(){
this.$jump('路由的name',{id:this.id});
}

• 内置方式打开新页面

//createPageHandler(): 跳转到新建页面，readonly属性同新建弹窗。
//detailPageHandler(item): 跳转到详情页面，item为要查看数据详情的对象。readonly属性同详情弹窗。
//editPageHandler(item): 跳转到编辑页面，item为要编辑数据详情的对象。readonly属性同编辑弹窗。
例如:
<el-button @click="detailPageHandler({name:'路由的name',params:{id:this.id,name:this.name}})"></el-button>

在js的data中添加：
createPageName: '路由的name',

其他两种打开方式同理.

新页面接收参数时：
直接打印 console.log(this.$routeParams.id)或者console.log(this.$routeParams.params.id)

注意：jump打开方式和PageHandler打开方式必须在路由中添加props属性

看都看到这里了，有钱的捧个钱场，没钱的捧个人场，留个关注吧–