Vue-router浏览器历史记录的模式和编程式导航

浏览器历史记录

1. 作用：控制路由跳转时操作浏览器历史记录的模式
2. 浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push
3. 如何开启replace模式：

   <router-link replace .......>News</router-link>

声明式导航

        在浏览器中，点击链接实现导航的方式，叫做声明式导航。

        例如：普通网页中点击a链接，vue项目中点击<router-link>都属于声明式导航

<!-- 通过标签进行跳转 -->
<router-link to="/path">tab2</router-link>

编程式导航

      在浏览器中，调用API方法实现导航的方式，叫做编程式导航。

      例如：普通网页中调用location.href 跳转到新页面的方式，都属于编程式导航

1. 作用：不借助<router-link>实现路由跳转，让路由跳转更加灵活

   <template>
     <div>
       <ul>
         <li v-for="item in list" :key="item.id">
           <router-link 
             replace 
             :to="{
             name: 'xiangqing',
             params: {
               id: item.id,
               title: item.title
             }
           }">{{ item.title }}</router-link>
           <button @click="examinePush(item)">push查看</button>
           <button @click="examineReplace(item)">replace查看</button>
         </li>
       </ul>
       <router-view></router-view>
     </div>
   </template>
   
   <script>
   export default {
     name: "Message",
     data() {
       return {
         list: [
           {
             id: "001",
             title: "消息001",
           },
           {
             id: "002",
             title: "消息002",
           },
           {
             id: "003",
             title: "消息003",
           },
         ]
       };
     },
     methods: {
       examinePush(item) {
         this.$router.push({
           name: 'xiangqing',
           params: {
             id: item.id,
             title: item.title
           }
         })
       },
       examineReplace(item) {
         this.$router.replace({
           name: 'xiangqing',
           params: {
             id: item.id,
             title: item.title
           }
         })
       }
     },
   };
   </script>
   

2. 利用$router下面的方法可以实现路由的前进和后退

   this.$router.forward() //前进
   this.$router.back() //后退
   this.$router.go() //可前进也可后退

   代码演示

   <template>
   	<div class="col-xs-offset-2 col-xs-8">
   		<div class="page-header">
   			<h2>Vue Router Demo</h2>
   			<button @click="back">后退</button>
   			<button @click="forward">前进</button>
   			<button @click="test">测试一下go</button>
   		</div>
   	</div>
   </template>
   
   <script>
   	export default {
   		name:'Banner',
   		methods: {
   			back(){
   				this.$router.back()
   				// console.log(this.$router)
   			},
   			forward(){
   				this.$router.forward()
   			},
   			test(){
   				this.$router.go(3)  //可前进也可后退  正数前进 负数后退
   			}
   		},
   	}
   </script>