Vue設定新增和返回按鈕,並通過路由攜帶引數
阿新 • • 發佈:2018-12-24
Vue設定新增按鈕
1.在cms模組的裸遊檔案中配置"新增頁面的路由":
{path:'/cms/page/add',name:'新增頁面',component: page_add,hidden:true}
2.在頁面列表新增“新增頁面”的按鈕
<router‐link class="mui‐tab‐item" :to="{path:'/cms/page/add/'}"> <el‐button type="primary" size="small">新增頁面</el‐button>
</router‐link>
3.在新增頁面新增提交的表單,進行資料的提交
Vue設定返回按鈕,並攜帶引數
1.在頁面上新增返回按鈕,並攜帶引數
<router‐link class="mui‐tab‐item" :to="{path:'/cms/page/add/',query:{ page: this.params.page,
siteId: this.params.siteId}}">
<el‐button type="primary" size="small">新增頁面</el‐button>
</router‐link>
2.定義返回方法
新增返回按鈕
<el‐button type= "primary" @click="go_back" >返回</el‐button>
定義返回方法,並攜帶引數到需要返回的頁面
go_back(){
this.$router.push({
path: '/cms/page/list', query: {
page: this.$route.query.page,
siteId:this.$route.query.siteId
} })
}
說明:
a、通過在路由上新增key/value串使用this.
route.query.id獲取引數id的值。
b、通過將引數作為路由一部分進行傳引數使用this.
route.params.id來獲取,此種情況用this.$route.query.id是拿不到的。
3.在原頁面上使用鉤子函式,回顯資料
因為在頁面載入的時候就需要帶回資料,因此需要使用created函式來進行資料的帶回
created() {
//從路由上獲取引數
this.params.page = Number.parseInt(this.$route.query.page||1); this.params.siteId = this.$route.query.siteId||'';
.....
小技巧:使用 || 返回第一個有效值