Vue Router系列之（九）编程式路由导航

编程式路由导航

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

2. 为什么需要除了<router-link>标签之外实现路由跳转的方式？

   <router-link>标签最后变为<a>标签，无法实现button按钮的跳转

   触发路由跳转可能需要异步触发，<router-link>标签也无法实现

3. 具体编码：

   //$router的两个API
   // vc.$router：VueRouter的实例
   // console.log(this.$router)
   
   // push()方法和replace()方法是在VueRouter的原型对象身上的，顺着this.$router的_proto_就能找到
   // 完成路由跳转，并且是对历史记录的push操作
   // 与<router-link>标签中to属性的配置项内容完全相同
   // this.$router.push({...})相当于如下代码，完成的功能也是一样的，展示指定组件（路由跳转）并传递参数
   // <router-link :to="{
   // 			  name: 'detail',
   // 			  params: {
   // 				  id: m.id,
   // 				  title: m.title
   // 			  }
   // }">
   // 			{{m.title}}
   // </router-link>
   this.$router.push({
   	name: 'detail',
   	params: {
   		  id: m.id,
   		  title: m.title
   	}
   })
   
   // this.$router.replace({...})相当于如下代码，完成的功能也是一样的，展示指定组件（路由跳转）并传递参数
   // <router-link replace :to="{
   // 			  name: 'detail',
   // 			  params: {
   // 				  id: m.id,
   // 				  title: m.title
   // 			  }
   // }">
   // 			{{m.title}}
   // </router-link>
   this.$router.replace({
   	name: 'detail',
   	params: {
   		  id: m.id,
   		  title: m.title
   	}
   })
   
   // 借助路由器实现历史记录中的前进操作
   this.$router.forward() //前进
   
   // 借助路由器实现历史记录中的后退操作
   this.$router.back() //后退
   
   this.$router.go() //可前进也可后退
   // 相当于连点3次前进
   this.$router.go(3)
   
   // 相当于连点4次后退
   this.$router.go(-4)
   

注：借助路由器【$router】可以实现历史记录的所有操作（前进、后退、push、replace）