Vue 路由 浏览器历史记录（Day53）

router-link的replace属性

1. 作用：控制路由跳转时操作浏览器历史记录的模式

2. 写入方式（栈内操作）

   1. push ：追加历史记录，路由跳转时默认此模式
   2. replace ：替换当前记录（栈顶记录）

3. 开启replace 模式方式

   App组件

                   <div class="list-group">
                       <router-link replace class="list-group-item" active-class="active" to="/about">About</router-link>
                       <router-link replace class="list-group-item" active-class="active" to="/home">Home</router-link>
                   </div>
   

编程式路由导航

1. 作用：不依赖router-link 实现路由跳转，让路由跳转更灵活

2. 实现

   1. 在目标（Message）组件中新增所需按钮

   2. 为按钮绑定点击事件

   3. 事件内调用$router 内的两个API并传入所需参数

      <script>
      import {defineComponent} from 'vue'
      ​
      export default defineComponent({
          name: "Message",
          methods:{
              pushShow(item){
                  // console.log(this.$router)
                  this.$router.push({
                      name:'DEtail',
                      query:{
                          id:item.id,
                          title:item.title
                      }
                  })
              },
              replaceShow(item){
                  this.$router.replace({
                      name:'DEtail',
                      query:{
                          id:item.id,
                          title:item.title
                      }
                  })
              }
          }
      })
      </script>
      ​
      <template>
          <div>
              <ul>
                  <li v-for="item in messageList" :key="item.id">
                      <router-link :to="{
                          name:'DEtail',
                          query:{
                              id:item.id,
                              title:item.title
                          }
                      }">{{ item.title }}
                      </router-link>
                      <button @click="pushShow(item)">push查看</button>
                      <button @click="replaceShow(item)">replace查看</button>
                  </li>
              </ul>
          </div>
      </template>
      

3. 其他API

   // 前进
   this.$router.forward()
   // 后退
   this.$router.back()
   // 指定步数跳转（值为负则后退相应步数，值为正则前进相应步数）
   this.$router.go(-2)