路由传递参数

路由配置

//路由组件传递参数1
    {
      path: '/props1', name: 'props1', component: () => import('@/views/Props'),
      props: true
    },
    //路由组件传递参数2
    {
      path: '/props2', name: 'props2', component: () => import('@/views/Props'),
      props: {
        user: { name: '张三', age: 25 }
      }
    },

视图

<template>
    <div id="props">
        <h1 style="background-color:blue;">路由组件传参</h1>
        姓名：{{ user.name }}<br />
        年龄：{{ user.age }}
    </div>
</template>
<script>
export default {
    name:'Props',
    props:{
        user:{
            name:'',
            age:0
        }
    },
    data(){
        return {

        }
    }
}
</script>

页面

 <input
      type="button"
      value="路由组件传递参数1"
      @click="routerToProps1"
    />
    <router-link :to="{name:'props1',params:{user:{name:'猪八戒',age:300}}}">路由组件传递参数1</router-link>
    <router-link to="/props2">路由组件传递参数2</router-link>
//方法

methods: {

    //路由到Props1

    routerToProps1(){

      this.$router.push({name:'props1',params:{user:{name:'小刚',age:18}}});

    }

  },