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>