编程式路由导航--学习笔记

                                                     编程式路由导航

1、案例截图

编程式路由导航需要经常用到，需要熟悉使用

过程说明：

（1）当选择News，再选择Message，将三个“push查看”依次顺序点击，每次选择回退功能，路由会倒序依次回退；

（2）当选择News，再选择Message，将三个“replace查看”依次顺序点击，当选择一次回退功能，路由直接刷新，进入News界面

2、所用知识点讲解

（1）this.$router.push(path)：用新路由以入栈形式覆盖当前路由，但不替换（可以返回到当前路由界面，原理如出栈顺序）；

（2）this.$router.replace(path)：用新路由替换当前路由（不可以返回到当前路由界面）；

（3）this.$router.back()：请求（返回）上一个记录路由；

（4）this.$router.go(-1)：请求（返回）上一个记录路由；（推荐优先使用前三个方法）

3、实现过程

（1）基于路由基础使用（请点击）和 嵌套路由（请点击）和向路由组件传递数据（请点击）前提下，

在文件src\views\Home\Message.vue中，定义路由组件，添加三个按钮：push查看、replace查看、返回

（2）在文件src\views\Home\Message.vue中， methods: { }  里面定义相关方法 

（3）终端运行 npm run dev 即可。

（4）拓展：补充完整代码如下：

<template>
  <div>
      <ul>
          <li v-for="(message, index) in messages" :key="index">
              <!-- 使用字符串拼接，用到反引号 -->
              <router-link :to="`/home/message/detail/${message.id}`">{{message.title}}</router-link>
              <button @click="pushShow(message.id)">push查看</button>
              <button @click="replaceShow(message.id)">replace查看</button>
          </li>
      </ul>
  <button @click="$router.back()">回退</button>
      <hr>
      <router-view></router-view>
  </div>
</template>

<script>
export default {
  data () {
      return {
        messages: []
      }
  },

  mounted () {
      //模拟ajax请求从后台获取数据
      setTimeout(() => {
          const messages = [
              {
                  id: 1,
                  title: 'message001'
              },
              {
                  id: 3,
                  title: 'message003'
              },
              {
                  id: 5,
                  title: 'message005'
              }
          ]
          this.messages = messages
      }, 1000)
  },
//规范说明：冒号后边需要空格；  每一句语句结束之后不能有空格
  methods: {
      pushShow (id) {
          this.$router.push(`/home/message/detail/${id}`)
      },

      replaceShow (id) {
           this.$router.replace(`/home/message/detail/${id}`)
      }
  }
}
</script>

<style>

</style>