编程式路由导航

Posted 2021-03-01 liuyang-520

<template>
  <div>
    <ul>
      <li v-for="item in messages" :key="item.id">
        <!--向message详情组件传参,使用query参数-->
        <router-link :to="`/home/message/detail/?id=${item.id}`">{{item.title}}</router-link>
        <!--编程式路由导航-->
        <button @click="pushShow(item.id)">push查看</button>
        <button @click="replaceShow(item.id)">replace查看</button>
      </li>
    </ul>
    <!--返回-->
    <button @click="$router.back()">返回</button>
    <hr>
    <router-view msg="aaa"></router-view>
  </div>
</template>

<script>
export default {
  data () {
    return {
      messages: []
    }
  },
  methods: {
    pushShow (id) {
      // 先进后出
      this.$router.push(`/home/message/detail?id=${id}`)
    },
    replaceShow (id) {
      // 先进先出
      this.$router.replace(`/home/message/detail?id=${id}`)
    }
  },
  mounted () {
    setTimeout(() => {
      this.messages = [
        {
          id: 1,
          title: ‘message01‘
        },
        {
          id: 2,
          title: ‘message02‘
        },
        {
          id: 3,
          title: ‘message03‘
        }
      ]
    }, 1000)
  }
}
</script>

<style scoped>

</style>