源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

vue params、query传参使用详解

  • 时间:2020-03-17 22:36 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:vue params、query传参使用详解
最近在学习Vue,本文介绍了vue params、query传参使用,分享给大家,也给自己留个笔记 声明式:<router-link :to="..."> 编程式: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>
 <div> <!---只允许有一个最外层标签 !-->
  <div>
   <p>{{message}}</p>
   <p @click="toBFun">跳转B组件啊啊</p>
   <!--<router-link :to="{ path: '/B',params:{name:'zs',age:22}}">跳转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路由文件中 不变有两个参数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: '/B',query:{name:'张飞',age:22}}">跳转B组件</router-link>
跳转后,浏览器地址为:http://localhost:8080/#/B?name=zzz&age=22 跟  this.$router.push(...) 是一样的
 <router-link :to="{path:'/B/123'}">
    跳转B组件</router-link>
  </div>
{
   path: '/B/:name',
   name: 'B',
   component: require('../components/B')
  }
取值
this.$route.params.name
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部