每日一篇（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屬性

看都看到這裏了，有錢的捧個錢場，沒錢的捧個人場，留個關注吧–