快捷導(dǎo)航

Vue實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)方式及傳參方式

更新時(shí)間：2024年03月19日 10:19:00 作者：sunfan0

這篇文章主要介紹了Vue實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)方式及傳參方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

路由配置

//路由配置  routerindex.js頁(yè)面

import Vue from 'vue'
import Router from 'vue-router'
import UserManager from '@/components/UserManager'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/userManager',
      name: 'userManager',
      component: UserManager
    }
  ]
})

1.標(biāo)簽跳轉(zhuǎn)

<router-link to="/userManager"> <router-link/>

跳轉(zhuǎn)時(shí)傳參

//路由配置
 path: '/userManager/:id',  
 
 //跳轉(zhuǎn)頁(yè)面   this.id 需要傳的參數(shù)
<router-link :to="'/userManager/' + this.id"> <router-link/>


//接收參數(shù)
this.$route.params.id

2.事件跳轉(zhuǎn)

methods: {
  goUserManager() {
    this.$router.push({ path:'/userManager'})
  }
}

query傳參

相當(dāng)于get請(qǐng)求，頁(yè)面跳轉(zhuǎn)時(shí)參數(shù)會(huì)在地址欄中顯示

//跳轉(zhuǎn)頁(yè)面 
this.$router.push({ 
    path:'/userManager',
    query: {
        id:this.id
    }
})

//接收參數(shù)
this.$route.query.id

params傳參

相當(dāng)于post請(qǐng)求，頁(yè)面跳轉(zhuǎn)時(shí)參數(shù)不會(huì)在地址欄中顯示

//跳轉(zhuǎn)頁(yè)面 
this.$router.push({ 
    path:'/userManager',
    name:'userManager', 
    //params傳參 需要使用 name 否則取不到；對(duì)應(yīng)路由配置的 name
    params: {
        id:this.id
    }
})

//接收參數(shù)
this.$route.params.id

使用params傳參時(shí) 刷新頁(yè)面參數(shù)消失

配置路由在path加 /:id 對(duì)應(yīng)需要傳的參數(shù)名

//路由配置
 path: '/userManager/:id',

注意：

傳參是router
接收參數(shù)是route

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

如何給element plus中動(dòng)態(tài)form-item增加校驗(yàn)的可行方法
文章主要介紹了ElementPlus中動(dòng)態(tài)生成el-form-item時(shí)如何使用內(nèi)置校驗(yàn)機(jī)制,通過(guò)設(shè)置prop屬性和使用行內(nèi)定義規(guī)則,結(jié)合v-model綁定響應(yīng)式數(shù)據(jù),實(shí)現(xiàn)動(dòng)態(tài)表單項(xiàng)的校驗(yàn),還提到可以定義規(guī)則函數(shù)優(yōu)化代碼,并在提交時(shí)統(tǒng)一提示校驗(yàn)未通過(guò)的錯(cuò)誤
2026-04-04
vue $set 給數(shù)據(jù)賦值的實(shí)例
今天小編就為大家分享一篇vue $set 給數(shù)據(jù)賦值的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-11-11
VUE對(duì)Storage的過(guò)期時(shí)間設(shè)置,及增刪改查方式
這篇文章主要介紹了VUE對(duì)Storage的過(guò)期時(shí)間設(shè)置,及增刪改查方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-02-02
一篇Vue、React重點(diǎn)詳解大全
這篇文章主要介紹了一篇Vue、React重點(diǎn)詳解大全，文章內(nèi)容詳細(xì)，通過(guò)案例可以更好的理解其相關(guān)知識(shí)，需要的朋友可以參考下
2023-01-01
基于vue實(shí)現(xiàn)一個(gè)神奇的動(dòng)態(tài)按鈕效果
今天我們將利用vue的條件指令來(lái)完成一個(gè)簡(jiǎn)易的動(dòng)態(tài)變色功能按鈕,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2019-05-05
Vue首屏加載過(guò)慢出現(xiàn)長(zhǎng)時(shí)間白屏的實(shí)現(xiàn)
本文主要介紹了Vue首屏加載過(guò)慢出現(xiàn)長(zhǎng)時(shí)間白屏的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
vue與bootstrap實(shí)現(xiàn)時(shí)間選擇器的示例代碼
本篇文章主要介紹了vue與bootstrap實(shí)現(xiàn)時(shí)間選擇器的示例代碼，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-08-08
vue二次封裝一個(gè)高頻可復(fù)用組件的全過(guò)程
在開(kāi)發(fā)Vue項(xiàng)目我們一般使用第三方UI組件庫(kù)進(jìn)行開(kāi)發(fā),但是這些組件提供的接口并不一定滿足我們的需求,這時(shí)我們可以通過(guò)對(duì)組件庫(kù)組件的二次封裝,來(lái)滿足我們特殊的需求,這篇文章主要給大家介紹了關(guān)于vue二次封裝一個(gè)高頻可復(fù)用組件的相關(guān)資料,需要的朋友可以參考下
2022-10-10
Vue生命周期函數(shù)調(diào)用詳解
這篇文章主要介紹了Vue生命周期函數(shù)調(diào)用詳解，本文將實(shí)現(xiàn)Vue生命周期相關(guān)代碼的核心邏輯，從源碼層面來(lái)理解生命周期，感興趣的小伙伴可以參考一下
2022-08-08
uniApp?h5項(xiàng)目如何通過(guò)命令行打包并生成指定路徑及文件名稱(chēng)
用uni-app來(lái)寫(xiě)安卓端,近日需要將程序打包為H5放到web服務(wù)器上,經(jīng)過(guò)一番折騰,這里給大家分享下,這篇文章主要給大家介紹了關(guān)于uniApp?h5項(xiàng)目如何通過(guò)命令行打包并生成指定路徑及文件名稱(chēng)的相關(guān)資料,需要的朋友可以參考下
2024-02-02