vue通过路由跳转页面并传递参数

1、传递页——inputForm.vue代码

<template>
  <div>
    <div>
       <input class="cardBox" v-model='username' placeholder="请输入您的名字" style="width:50%" />
    </div>
    <Button type="primary" @click="login()" class="but">登录</Button><br>
  </div>
</template>

<script>
export default {
     
     
  data() {
     
     
    return {
     
     
      username:'',
    }
  },
  methods:{
     
     
    login () {
     
     
      this.$router.push({
     
     
        name: 'acceptPage',
        // 除了用params也可以用query
        params: {
     
     
          username: this.username,
        }
      });
    }
  }
}
</script>

<style scoped>
/*CSS样式省略了哈*/
</style>

2、接收页——acceptPage.vue代码

<template>
  <div class="all">
    <div class="table">
      <div class="tr">
         <div class="td-left">
           <div class="icon">
             <img src="../assets/img/user.png">
           </div>
         </div>
         <div class="td-mid">
           <div class="user-left">用户姓名</div>
         </div>
         <div class="td-right">
           <!--插值表达式-->
           <div id="user-right" class="user-right">{
   
   {username}}</div>
         </div>
       </div>
    </div>
  </div>
</template>

<script>
export default {
     
     
  data(){
     
     
    return{
     
     
      username:'',   //用于存储从路由接收过来的params的值
    }
  },
  created() {
     
     
    this.getParams();
  },
  methods: {
     
     
    //接收路由传过来的参数
    getParams() {
     
     
      //
      this.username = this.$route.params.username;
    }
  }
}
</script>

<style scoped>
/*CSS样式省略*/
</style>