vue params、query傳參使用詳解

更新時間：2017年09月12日 09:34:08 作者：SeaJson

本篇文章主要介紹了vue params、query傳參使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

最近在學(xué)習(xí)Vue，本文介紹了vue params、query傳參使用，分享給大家，也給自己留個筆記

聲明式：<router-link :to="...">

編程式：router.push(...)

這兩種方式都可以實現(xiàn)跳轉(zhuǎn)鏈接，在上篇文章繼續(xù)，通過A組件跳轉(zhuǎn)鏈接到B組件并且傳參數(shù)。

1、router.push使用

router/index.js

export default new Router({
 routes: [
   {
   path: '/',
   name: 'A',
   component: require('../components/A')
  },
  {
   path: '/B/:name/:age',
   name: 'B',
   component: require('../components/B')
  }
 ]
})

上邊，在路由中為B組件添加兩個參數(shù) name ,age

A組件，綁定一個@click事件，跳轉(zhuǎn)B組件傳參使用params

<template>
 <div> <!---只允許有一個最外層標(biāo)簽 ！-->
  <div>
   <p>{{message}}</p>
   <p @click="toBFun">跳轉(zhuǎn)B組件啊啊</p>
   <!--<router-link :to="{ path: '/B',params:{name:'zs',age:22}}">跳轉(zhuǎn)B組件啊啊</router-link>-->
  </div>
 </div>
</template>
<script>
 export default {
  data: function () {
   return {
    message: 'vue好帥?。?
   }
  },
  methods: {
   toBFun: function(){
    this.$router.push({name:'B',params:{name:'xy',age:22}});
   }
  }
 }
</script>
<style>

</style>

這時瀏覽器會顯示：http://localhost:8080/#/B/xy/22

在看下query 傳值及地址變化

同樣在 router/index.js路由文件中不變有兩個參數(shù)name,age

 {
   path: '/B/:name/:age',
   name: 'B',
   component: require('../components/B')
  }

在A組件中，之前參數(shù)傳遞是通過params,

this.$router.push({name:'B',params:{name:'xy',age:22}});

替換后，query

 this.$router.push({name:'B',query:{name:'xy',age:22}});

這時瀏覽器會發(fā)現(xiàn)：http://localhost:8080/#/?name=xy&age=22

通過以上兩種，頁面刷新后，參數(shù)還會保留的。

獲取值有些不相同：
params：this.$route.params.name;

query:this.$route.query.name;

------------------------ 還有種方式--------------------------------------------

使用 router-link

 <router-link :to="{ path: '/B',query:{name:'張飛',age:22}}">跳轉(zhuǎn)B組件</router-link>

跳轉(zhuǎn)后，瀏覽器地址為：http://localhost:8080/#/B?name=zzz&age=22

跟 this.$router.push(...) 是一樣的

 <router-link :to="{path:'/B/123'}">
    跳轉(zhuǎn)B組件</router-link>
  </div>

{
   path: '/B/:name',
   name: 'B',
   component: require('../components/B')
  }

取值

this.$route.params.name

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Element-Plus實現(xiàn)動態(tài)渲染圖標(biāo)的示例代碼
在Element-Plus中，我們可以使用component標(biāo)簽來動態(tài)渲染組件，本文主要介紹了Element-Plus?實現(xiàn)動態(tài)渲染圖標(biāo)教程，具有一定的參考價值，感興趣的可以了解一下
2024-03-03
解決Vue?input輸入框卡死的問題
這篇文章主要介紹了解決Vue?input輸入框卡死的問題,文中同時給大家提到了Vue-element中el-input輸入卡頓問題及解決方法，本文結(jié)合示例代碼給大家介紹的非常詳細，需要的朋友可以參考下
2022-09-09
詳解Vue中keep-alive的使用
keep-alive是Vue的內(nèi)置組件，當(dāng)它包裹動態(tài)組件時，會緩存不活動的組件實例，而不是銷毀，這篇文章主要介紹了詳解Vue中keep-alive的使用,需要的朋友可以參考下
2023-03-03
基于Vue實現(xiàn)HTML轉(zhuǎn)PDF并導(dǎo)出
這篇文章主要為大家介紹了三種方法，可以實現(xiàn)將HTML頁面轉(zhuǎn)為PDF并實現(xiàn)下載。文中的示例代碼講解詳細，感興趣的小伙伴可以學(xué)習(xí)一下
2022-04-04
vue實現(xiàn)按需加載組件及異步組件功能
這篇文章主要介紹了vue實現(xiàn)按需加載組件和異步組件，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下
2019-05-05
vue請求本地自己編寫的json文件的方法
這篇文章主要介紹了vue請求本地自己編寫的json文件，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-04-04
vue-router4版本第一次打開界面不匹配路由問題解決
本文主要介紹了vue-router4版本第一次打開界面不匹配路由問題解決，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
unplugin-auto-import的配置以及eslint報錯解決詳解
unplugin-auto-import?解決了vue3-hook、vue-router、useVue等多個插件的自動導(dǎo)入,也支持自定義插件的自動導(dǎo)入,是一個功能強大的typescript支持工具,這篇文章主要給大家介紹了關(guān)于unplugin-auto-import的配置以及eslint報錯解決的相關(guān)資料,需要的朋友可以參考下
2022-08-08
vue 之 .sync 修飾符示例詳解
這篇文章主要介紹了vue 之 .sync 修飾符的相關(guān)知識，非常不錯，具有參考借鑒價值 ,需要的朋友可以參考下
2018-04-04
SpringBoot+Vue開發(fā)之Login校驗規(guī)則、實現(xiàn)登錄和重置事件
這篇文章主要介紹了SpringBoot+Vue開發(fā)之Login校驗規(guī)則、實現(xiàn)登錄和重置事件,本文通過圖文實例相結(jié)合給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-10-10