vue-router的编程式导航

编程式导航跟router-link（这叫声明式）一样，都能实现组件之间的跳转，router-link是根据a 标签进行跳转，而导航式，通过绑定click事件，调用router.方法来进行跳转。

一.this.$router.push官方中四种方式，我这里只说前面三种。

以下都在vue内部调用

1. this.$router.push({ path:’/home/goodsdetails’})  path：你要跳转的url路径（我的跳转到/home/goodsdetails),

2. this.$router.push( “/home/goodsdetails/” ) 直接传入你要跳的url路径 ,跟第1种一样，只不过少了path和对象不同eg：
   
   需要先注册好路由与绑定事件（请看第3点截图）

3. this.$router.push({ name:‘goodsdetails’ , params:{ id:5}}) name需要在路由上事前起好名字(我的名goodsdetails),params是你需要传的参 eg：

   //事先注册好路由
   
   
   //添加点击事件
   
   最后图 params:{ id } 是简写 原是 params:{ id: id} 相同可写一个

二.router.replace 是跟router.push是差不多的,只是router.push有历史记录，而router.replace是没有历史记录的

三.router.go()

历史记录的返回或前进
先看常见的例子：

按返回键返回历史上一页（在vue内部使用,用this），源码如下:

给按钮添加点击事件

官方文档截图如下：