使用vue-router在頁面之間傳值及接收值

第一頁 點擊去第二頁的時候進行傳值直接貼代碼看：

<template>
  <div id="app">
    <div><router-link to="/">首頁</router-link></div>
    <div><a href="javascript:void(0)" @click="getMovieDetail(1)">去第二個頁面</a></div>
    <div><router-link to="/home">去home</router-link></div>
    <router-view/>

    <a href="https://www.feiyit.com">abc</a>
  </div>
</template>

<script>
export default {
  name: 'app',
  methods:{
    getMovieDetail(id) {
      this.$router.push({
        name: 'login',
        params: {
          id: id
        }
      })
    }
  }
}
</script>

<style>

</style>

紅色部分爲傳值部分，使用this.$router.push()進行傳值

第二頁面接收從第一個頁面傳遞過來的參數 id

<template>

</template>

<script>

export default {
  name: 'login',
  data () {
    return {
      uid:this.$route.params.id,
      msg: '這是第二個頁面'
    }
  },
  computed: {
           
    },
  mounted: function() {
            console.log(this.uid);
    },
  methods:{

  }
}
</script>

　　紅色部分打印下傳遞過來的id值，在接受傳值的頁面裏使用this.$route.params.id 便可獲取到傳遞的值

注意，若是刷新login頁面，將失去傳值

解決方法，在路由裏面增長變量        其中【/login/:id】 

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/login/:id',
      name: 'login',
      component: login,
      meta: {
            title: '登陸頁'
      }
    },
    {
      path: '/home',
      name: 'home',
      component: home,
      meta: {
            title: '其餘頁'
      }
    }
  ]
})