vue2.0使用路由传值

1、在路由跳转链接里拼接需要传的值

2、配置路由（如下图）

3、组件接收值

实现效果：

组件1

组件2

【完整代码】

组件1 setData.vue

<template>
  <div>
    <h2>组件1，传值</h2>
    <input v-model="routerData" type="text"/>
    <router-link :to="'/getData/'+routerData">传值</router-link>
  </div>
</template>

<script>
    export default {
        name: "setData",
      data(){
          return {
            routerData:''
          }
      }
    }
</script>

<style scoped>

</style>

组件2 getData.vue

<template>
  <div>
    <h2>组件2，接收值</h2>
    <h1>{{getData}}</h1>
  </div>
</template>

<script>
    export default {
        name: "getData",
      data(){
          return {
            getData:this.$route.params.data
          }
      }
    }
</script>

<style scoped>

</style>

路由router.js

import Vue from 'vue'
import Router from 'vue-router'
import SetData from '@/components/setData'
import GetData from '@/components/getData'

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'setData',
      component: SetData
    },
    {
      path:'/getData/:data',
      name:'getData',
      component:GetData
    }
  ],
  mode:'history'
})

（完）

扫描二维码关注公众号，回复： 2671419 查看本文章

相关文章

vue2.0组件间传值的方法汇总（父子间、兄弟间）