Vue2.0使用路由进行组件之间传值（三）

重大福利

 

阿里云服务器优惠  https://www.aliyun.com/1111/home?userCode=n9v6urcn

 

 

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: '成功！'
      }
    },
    methods: {
      toBFun: function(){
        this.$router.push({name:'B',params:{name:'wang',age:21}});
      }
    }
  }
</script>
<style>

</style>

 

在A组件中，之前参数传递是通过params,

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

query

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

 

以上两种方式页面刷新后，参数还会保留的。