快捷導(dǎo)航

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

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

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

路由配置

//路由配置  routerindex.js頁面

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)時傳參

//路由配置
 path: '/userManager/:id',  
 
 //跳轉(zhuǎn)頁面   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請求，頁面跳轉(zhuǎn)時參數(shù)會在地址欄中顯示

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

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

params傳參

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

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

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

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

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

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

注意：

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

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

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