欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)文章

  • 解決vue-quill-editor上傳內(nèi)容由于圖片是base64的導(dǎo)致字符太長(zhǎng)的問(wèn)題

    解決vue-quill-editor上傳內(nèi)容由于圖片是base64的導(dǎo)致字符太長(zhǎng)的問(wèn)題

    vue-quill-editor默認(rèn)插入圖片是直接將圖片轉(zhuǎn)為base64再放入內(nèi)容中，如果圖片較多，篇幅太長(zhǎng)，就會(huì)比較煩惱，接下來(lái)通過(guò)本文給大家介紹vue-quill-editor上傳內(nèi)容由于圖片是base64的導(dǎo)致字符太長(zhǎng)的問(wèn)題及解決方法,需要的朋友可以參考下
    2018-08-08
  • Electron實(shí)現(xiàn)靜默打印小票的流程詳解

    Electron實(shí)現(xiàn)靜默打印小票的流程詳解

    很多情況下程序中使用的打印都是用戶無(wú)感知的,并且想要靈活的控制打印內(nèi)容,往往需要借助打印機(jī)給我們提供的api再進(jìn)行開(kāi)發(fā),這種開(kāi)發(fā)方式非常繁瑣,并且開(kāi)發(fā)難度較大,本文給大家介紹了Electron實(shí)現(xiàn)靜默打印小票的流程,感興趣的朋友可以參考下
    2024-06-06
  • VUE3中的函數(shù)的聲明和使用

    VUE3中的函數(shù)的聲明和使用

    這篇文章主要介紹了VUE3中的函數(shù)的聲明和使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • vue3如何按需加載第三方組件庫(kù)詳解

    vue3如何按需加載第三方組件庫(kù)詳解

    距離 Vue 3.0 正式版發(fā)布已經(jīng)有一段時(shí)間了,關(guān)于vue3組件庫(kù)相關(guān)的問(wèn)題還是挺多人感興趣的,這篇文章主要給大家介紹了關(guān)于vue3如何按需加載第三方組件庫(kù)的相關(guān)資料,需要的朋友可以參考下
    2021-06-06
  • vue中keep-alive，include的緩存問(wèn)題

    vue中keep-alive，include的緩存問(wèn)題

    這篇文章主要介紹了vue中keep-alive，include的緩存問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-11-11
  • 為什么推薦使用JSX開(kāi)發(fā)Vue3

    為什么推薦使用JSX開(kāi)發(fā)Vue3

    這篇文章主要介紹了為什么推薦使用JSX開(kāi)發(fā)Vue3，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
    2020-12-12
  • vue3中輕松實(shí)現(xiàn)switch功能組件的全過(guò)程

    vue3中輕松實(shí)現(xiàn)switch功能組件的全過(guò)程

    這篇文章主要給大家介紹了關(guān)于vue3中輕松實(shí)現(xiàn)switch功能組件的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2021-01-01
  • vue3組合式API中setup()概念和reactive()函數(shù)的用法

    vue3組合式API中setup()概念和reactive()函數(shù)的用法

    這篇文章主要介紹了vue3組合式API中setup()概念和reactive()函數(shù)的用法,接下來(lái)的事件，我將帶著你從淺到深分析為什么我們需要學(xué)習(xí)組合式API以及我們的setup()函數(shù)作為入口函數(shù)的一個(gè)基本的使用方式，需要的朋友可以參考下
    2023-03-03
  • Vue插槽slot全部使用方法示例解析

    Vue插槽slot全部使用方法示例解析

    插槽就是子組件中的提供給父組件使用的一個(gè)占位符，用<slot></slot> 表示，父組件可以在這個(gè)占位符中填充任何模板代碼，如 HTML、組件等，填充的內(nèi)容會(huì)替換子組件的<slot></slot>標(biāo)簽，這篇文章主要介紹了Vue插槽的理解和使用,需要的朋友可以參考下
    2023-03-03
  • 基于Vue實(shí)現(xiàn)支持按周切換的日歷

    基于Vue實(shí)現(xiàn)支持按周切換的日歷

    這篇文章主要為大家詳細(xì)介紹了基于Vue實(shí)現(xiàn)支持按周切換的日歷，根據(jù)實(shí)際開(kāi)發(fā)情況按每年、每月、每周進(jìn)行切換，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2017-08-08

最新評(píng)論