首頁 > web前端 > js教程 > 主體

vue+query傳參步奏詳解

php中世界最好的语言
發布: 2018-04-18 09:38:52
原創
2796 人瀏覽過

這次帶給大家vue query傳參步奏詳解,vue query傳參的注意事項有哪些,下面就是實戰案例,一起來看一下。

最近在學習Vue,本文介紹了vue params、query傳參使用,分享給大家,也給自己留個筆記

宣告式:

編者:router.push(...)

這兩種方式 都可以實現跳轉鏈接,在上篇文章繼續,透過A組件跳轉鏈接到B組件並且傳參數。

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元件新增兩個參數 name ,age

A元件,綁定一個@click事件

,跳轉B元件傳參 使用params

<template>
 <p> <!---只允许有一个最外层标签 !-->
  <p>
   <p>{{message}}</p>
   <p @click="toBFun">跳转B组件啊啊</p>
   <!--<router-link :to="{ path: &#39;/B&#39;,params:{name:&#39;zs&#39;,age:22}}">跳转B组件啊啊</router-link>-->
  </p>
 </p>
</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路由檔案中 不變有兩個參數name,age

 {
   path: '/B/:name/:age',
   name: 'B',
   component: require('../components/B')
  }
登入後複製
在A元件中,先前參數傳遞是透過params,

this.$router.push({name:'B',params:{name:'xy',age:22}});
登入後複製
替換後,query

 this.$router.push({name:'B',query:{name:'xy',age:22}});
登入後複製
這時瀏覽器會發現:http://localhost:8080/#/?name=xy&age=22

 經過以上兩種,頁面刷新後,參數還會保留的。


取得值有些不相同:

params:this.$route.params.name;

query:this.$route.query.name;

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

 使用 router-link

 <router-link :to="{ path: &#39;/B&#39;,query:{name:&#39;张飞&#39;,age:22}}">跳转B组件</router-link>
登入後複製
跳轉後,瀏覽器位址為:http://localhost:8080/#/B?name=zzz&age=22

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

 <router-link :to="{path:&#39;/B/123&#39;}">
    跳转B组件</router-link>
  </p>
登入後複製
{
   path: '/B/:name',
   name: 'B',
   component: require('../components/B')
  }
登入後複製
取值

this.$route.params.name
登入後複製
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:



####

以上是vue+query傳參步奏詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板