vue跳轉(zhuǎn)頁面并且實(shí)現(xiàn)參數(shù)傳遞接受示例
更新時(shí)間：2022年06月02日 17:12:11 作者：把蘋果咬哭的測(cè)試筆記
這篇文章主要為大家介紹了vue跳轉(zhuǎn)頁面并且實(shí)現(xiàn)參數(shù)傳遞接受示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
vue跳轉(zhuǎn)頁面及參數(shù)的傳遞接受
要實(shí)現(xiàn)一個(gè)功能：從頁面A跳轉(zhuǎn)到頁面B，并且頁面A的參數(shù)要傳遞到頁面B，B使用傳過來的參數(shù)。
從A到B。
其實(shí)就是2步走：1，A傳遞參數(shù)。2，B接受參數(shù)。
一、頁面跳轉(zhuǎn)、傳遞參數(shù)
在A頁面的對(duì)應(yīng)按鈕，寫上一個(gè)方法，點(diǎn)擊的時(shí)候調(diào)用這個(gè)方法，進(jìn)行跳轉(zhuǎn)。
# content of A
<el-button size="mini" icon="el-icon-zoom-in"
@click.native="goto_report_log(scope.row.job_name)">查看報(bào)告&日志
</el-button>
... ...
# 寫上對(duì)應(yīng)的方法
goto_report_log(job_name) {
// 點(diǎn)擊跳轉(zhuǎn)到報(bào)告頁
this.$router.push(
{
path: '/manage/testReportAndLogo',
query: {
job_name: job_name
}
}
)
}這時(shí)候，點(diǎn)擊按鈕就可以調(diào)轉(zhuǎn)到B頁面了。
二、接收參數(shù)
首先，頁面B的html對(duì)應(yīng)的字段要添加好，這是前提。
<el-form-item label="Job名稱" labelWidth="110px">
<el-input placeholder="輸入job名稱" v-model="this.job_name"> #使用拿到的值
</el-input>
</el-form-item>
... ...
export default {
data() {
return {
job_name: "", # 存放A傳過來的值
... ...
# 接著寫上對(duì)應(yīng)的方法
methods: {
getParams() {
this.job_name = this.$route.query.job_name # 這里可以用this.$route.query拿到值
... ...
created() {
this.getParams(); # 放在created里調(diào)用即可
},很簡單，做個(gè)記錄。
以上就是vue跳轉(zhuǎn)頁面并且實(shí)現(xiàn)參數(shù)傳遞接受示例的詳細(xì)內(nèi)容，更多關(guān)于vue跳轉(zhuǎn)頁面參數(shù)傳遞接受的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要為大家介紹了Vue3?源碼解讀之?Teleport?組件使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
vue中的vue-print-nb如何實(shí)現(xiàn)頁面打印
這篇文章主要介紹了vue中的vue-print-nb如何實(shí)現(xiàn)頁面打印，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue自定義開發(fā)滑動(dòng)圖片驗(yàn)證組件
這篇文章主要為大家詳細(xì)介紹了vue自定義開發(fā)滑動(dòng)圖片驗(yàn)證組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
如何在Vue中使localStorage具有響應(yīng)式(思想實(shí)驗(yàn))
這篇文章主要介紹了如何在Vue中使localStorage具有響應(yīng)式,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了安裝使用VUE的教程，本文給大家提到了遇到的問題原因分析及解決方法,需要的朋友可以參考下2019-06-06
本篇文章主要介紹了vue2.0之多頁面的開發(fā)的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
Vue.js：使用Vue-Router 2實(shí)現(xiàn)路由功能介紹
本篇文章主要介紹了Vue.js：使用Vue-Router 2實(shí)現(xiàn)路由功能介紹，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
vue-cli的index.html中使用環(huán)境變量方式
這篇文章主要介紹了vue-cli的index.html中使用環(huán)境變量方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue 中slot 的具體用法,包括子組件父組件的代碼介紹，需要的朋友可以參考下2018-04-04
使用 Element UI Table 的 slot-scope方法
這篇文章主要介紹了使用 Element UI Table 的 slot-scope方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10