Vue 頁(yè)面跳轉(zhuǎn)不用router-link的實(shí)現(xiàn)代碼
更新時(shí)間：2018年04月12日 09:11:31 作者：Oliver556
這篇文章主要介紹了 Vue 頁(yè)面跳轉(zhuǎn)不用router-link的實(shí)現(xiàn)代碼，文中給大家介紹了vue router-link跳轉(zhuǎn)傳值示例,需要的朋友可以參考下
1、給父頁(yè)面跳轉(zhuǎn)的地方設(shè)置事件
//原來的頁(yè)面上展示的信息
<div v-if="!addShow" class="function">
<el-row>
<template slot-scope="scope">
<el-button type="success" size="mini" @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
//帶參數(shù)進(jìn)行編輯
<el-button type="danger" size="mini" @click="handleDelete(scope.row)">刪除</el-button>
</template>
</el-row>
</div>
//要跳轉(zhuǎn)過去的頁(yè)面用隱藏來代替
<div v-if="addShow" class="add-category ">
<el-col :span="20" :offset="2">
<el-form :model="formData" :rules="rules" ref="formData" label-position="left">
<el-row>
<el-col :span="10">
<el-form-item label="銷售區(qū)域名稱" prop="name">
<el-input v-model="formData.name"></el-input>
//v-model綁定formData.name(name為需要的字段,formDataw為表格ref綁定的數(shù)據(jù))
</el-form-item>
</el-col>
</el-row>
<el-col :span="18">
<el-form-item label="銷售區(qū)域描述">
<el-input type="textarea" :rows="5" v-model="formData.description"></el-input>
</el-form-item>
</el-col>
<el-col :span="2" :offset="9">
<el-button type="success" @click="handleSubmit('formData')" >確定</el-button>
</el-col>
<el-col :span="2" :offset="1">
<el-button @click="onCancel">取消</el-button>
</el-col>
</el-form>
</el-col>
</div>
2、JS部分
data() {
addShow: false //設(shè)置要顯示的頁(yè)面部分默認(rèn)為false，隱藏
checkdDistributor: null,
},
methods: {
// 編輯按鈕
handleEdit(index,row){
this.checkdDistributor = row; //接受傳參
this.addShow = true; // addshow為要顯示的頁(yè)面
}
}
watch: {
// 帶參數(shù)編輯
checkdDistributor(){
for(let attr in this.formData){
this.formData[attr] = ('' + this.checkdDistributor[attr]); //寫入?yún)?shù)
}
}
},
3、最后上效果圖
補(bǔ)充：
vue router-link跳轉(zhuǎn)傳值示例
1、router-link
<router-link :to="{name:'deitail',params:{freezeMon:'2017-10',owerName:'西安'}}" tag="div" >
</router-link>
2、routes路由
export default new Router({
routes: [
{
path: '/',
name: 'Index',
component: Index
},
{
path: '/deitail',
name: 'deitail',
component: deitail
}
]
})
3、取值
<h1>{{$route.params.freezeMon}}</h1>
4、小結(jié)：router-link跳轉(zhuǎn)傳值要注意的地方
* to前面要加:
* to后面{中的name值要與路由中的name值一致
* 下面的這種方式是錯(cuò)誤的
<router-link to="{path:'/deitail',params:{freezeMon:'2017-10',owerName:'西安'}}" tag="div" >
</router-link>
相關(guān)文章
解決vue js IOS H5focus無法自動(dòng)彈出鍵盤的問題
今天小編就為大家分享一篇解決vue js IOS H5focus無法自動(dòng)彈出鍵盤的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue?使用el-table循環(huán)生成表格的過程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章教大家如何分分鐘玩轉(zhuǎn)Vue.js組件,完善了vue.js組件的學(xué)習(xí)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
vue3使用vue-count-to組件的實(shí)現(xiàn)
這篇文章主要介紹了vue3使用vue-count-to組件的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
Vue3子組件向父組件傳值的兩種實(shí)現(xiàn)方式
近期學(xué)習(xí)vue3的父子組件之間的傳值,發(fā)現(xiàn)跟vue2的并沒有太大的區(qū)別,這篇文章主要給大家介紹了關(guān)于Vue3子組件向父組件傳值的兩種實(shí)現(xiàn)方式,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
這篇文章主要介紹了2023年最新的vue.js下載和安裝的3種方法,每種方法結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-05-05
詳解vue前后臺(tái)數(shù)據(jù)交互vue-resource文檔
本篇文章主要介紹了vue前后臺(tái)數(shù)據(jù)交互vue-resource文檔，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
Vue詳細(xì)講解Vuex狀態(tài)管理的實(shí)現(xiàn)
這篇文章主要介紹了Vuex狀態(tài)管理器的使用,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
vue使用動(dòng)態(tài)組件實(shí)現(xiàn)TAB切換效果
這篇文章主要介紹了vue使用動(dòng)態(tài)組件實(shí)現(xiàn)TAB切換效果的方法，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-05-05
vue中beforeRouteLeave實(shí)現(xiàn)頁(yè)面回退不刷新的示例代碼
這篇文章主要介紹了vue中beforeRouteLeave實(shí)現(xiàn)頁(yè)面回退不刷新的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11