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.標簽跳轉(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傳參

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

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

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

params傳參

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

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

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

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

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

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

注意：

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

總結(jié)

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

您可能感興趣的文章:

解決vue-quill-editor上傳內(nèi)容由于圖片是base64的導致字符太長的問題
vue-quill-editor默認插入圖片是直接將圖片轉(zhuǎn)為base64再放入內(nèi)容中，如果圖片較多，篇幅太長，就會比較煩惱，接下來通過本文給大家介紹vue-quill-editor上傳內(nèi)容由于圖片是base64的導致字符太長的問題及解決方法,需要的朋友可以參考下
2018-08-08
Electron實現(xiàn)靜默打印小票的流程詳解
很多情況下程序中使用的打印都是用戶無感知的,并且想要靈活的控制打印內(nèi)容,往往需要借助打印機給我們提供的api再進行開發(fā),這種開發(fā)方式非常繁瑣,并且開發(fā)難度較大,本文給大家介紹了Electron實現(xiàn)靜默打印小票的流程,感興趣的朋友可以參考下
2024-06-06
VUE3中的函數(shù)的聲明和使用
這篇文章主要介紹了VUE3中的函數(shù)的聲明和使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue3如何按需加載第三方組件庫詳解
距離 Vue 3.0 正式版發(fā)布已經(jīng)有一段時間了,關于vue3組件庫相關的問題還是挺多人感興趣的,這篇文章主要給大家介紹了關于vue3如何按需加載第三方組件庫的相關資料,需要的朋友可以參考下
2021-06-06
vue中keep-alive，include的緩存問題
這篇文章主要介紹了vue中keep-alive，include的緩存問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-11-11
為什么推薦使用JSX開發(fā)Vue3
這篇文章主要介紹了為什么推薦使用JSX開發(fā)Vue3，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2020-12-12
vue3中輕松實現(xiàn)switch功能組件的全過程
這篇文章主要給大家介紹了關于vue3中輕松實現(xiàn)switch功能組件的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-01-01
vue3組合式API中setup()概念和reactive()函數(shù)的用法
這篇文章主要介紹了vue3組合式API中setup()概念和reactive()函數(shù)的用法,接下來的事件，我將帶著你從淺到深分析為什么我們需要學習組合式API以及我們的setup()函數(shù)作為入口函數(shù)的一個基本的使用方式，需要的朋友可以參考下
2023-03-03
Vue插槽slot全部使用方法示例解析
插槽就是子組件中的提供給父組件使用的一個占位符，用<slot></slot> 表示，父組件可以在這個占位符中填充任何模板代碼，如 HTML、組件等，填充的內(nèi)容會替換子組件的<slot></slot>標簽，這篇文章主要介紹了Vue插槽的理解和使用,需要的朋友可以參考下
2023-03-03
基于Vue實現(xiàn)支持按周切換的日歷
這篇文章主要為大家詳細介紹了基于Vue實現(xiàn)支持按周切換的日歷，根據(jù)實際開發(fā)情況按每年、每月、每周進行切換，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-08-08