這次帶給大家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,跳轉B元件傳參 使用params<template> <p> <!---只允许有一个最外层标签 !--> <p> <p>{{message}}</p> <p @click="toBFun">跳转B组件啊啊</p> <!--<router-link :to="{ path: '/B',params:{name:'zs',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>
# 在看下query 傳值
及位址變化# 同樣在 router/index.js路由檔案中 不變有兩個參數name,age{ path: '/B/:name/:age', name: 'B', component: require('../components/B') }
this.$router.push({name:'B',params:{name:'xy',age:22}});
this.$router.push({name:'B',query:{name:'xy',age:22}});
取得值有些不相同:
<router-link :to="{ path: '/B',query:{name:'张飞',age:22}}">跳转B组件</router-link>
<router-link :to="{path:'/B/123'}"> 跳转B组件</router-link> </p>
{ path: '/B/:name', name: 'B', component: require('../components/B') }
this.$route.params.name
以上是vue+query傳參步奏詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!