小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
前文我们学习Vue-Router 的路由传参, 本文来学习 Vue-Router 的编程式导航, 可通过 api 进行不同页面的跳转
Vue-Router 编程式导航
前文我们进行页面的跳转都是使用 <router-link> 这一标签进行跳转的, 另外我们还可以在 JavaScript 代码中进行页面的跳转, 就是使用编程式的导航, 通过相关的 api, 动态实现.
编程式的导航借助了 router 的实例上定义的一些方法 api, 通过编写代码就可以实现跳转了.
在 Vue 实例内部, 即组件内部，你可以通过
$router访问路由实例。因此可以调用this.$router.push
下面的这几个就是可用的跳转方法.
this.$router.gothis.$router.backthis.$router.push({'name':名字, params:{a: 10,b: 10}, query:{c: ’ccc’}}this.$router.replace替换掉的当前路由
说明: this.$router.push 这个方法 会在 history栈中添加传递的参数: 链接地址. 使用这种方法, 在浏览器上点击 后退 按钮, 还可以返回前一个页面.
我们使用 <router-link> 标签进行跳转时, 就是像上面的说明一样, 在 history 历史记录中添加一个新的记录.
什么是编程式
通过上面的解释, 这样 我们就可以理解什么是 编程式了:
-
像
router-link这样跳转就是直接声明式; -
而通过路由对象的几个方法进行页面跳转 就是
编程式
其他的跳转方法
上面说的 this.$router.push 是向 history 添加一项新的, 所以可以后退,
另外 router 对象上还有一个 this.$router.replace. 这个replace会直接替换掉当前的路由, 所以就不能后退了.
参考
其他更多方法可参考官方文档: Vue-Router 官方文档:
