一起看看路由吧(常见用法)(2)

1. 声明式导航 & 编程式导航

在浏览器中，点击链接实现导航的方式，叫做声明式导航。例如： ⚫ 普通网页中点击 链接、vue 项目中点击 都属于声明式导航

在浏览器中，调用 API 方法实现导航的方式，叫做编程式导航。例如： ⚫ 普通网页中调用 location.href 跳转到新页面的方式，属于编程式导航

2. vue-router 中的编程式导航 API

vue-router 提供了许多编程式导航的 API，其中最常用的导航 API 分别是：

① this.$router.push('hash 地址')

        跳转到指定 hash 地址，并增加一条历史记录

② this.$router.replace('hash 地址') 

         跳转到指定的 hash 地址，并替换掉当前的历史记录

③ this.$router.go(数值 n)

        实现导航历史前进、后退

3. $router.push

调用 this.$router.push() 方法，可以跳转到指定的 hash 地址，从而展示对应的组件页面。示例代码如下：

 

4. $router.replace

调用 this.$router.replace() 方法，可以跳转到指定的 hash 地址，从而展示对应的组件页面。

push 和 replace 的区别：

        push 会增加一条历史记录

        replace 不会增加历史记录，而是替换掉当前的历史记录

5. $router.go

调用 this.$router.go() 方法，可以在浏览历史中前进和后退。示例代码如下：

6. $router.go 的简化用法 

在实际开发中，一般只会前进和后退一层页面。因此 vue-router 提供了如下两个便捷方法：

① $router.back() 

         在历史记录中，后退到上一个页面

② $router.forward()

        在历史记录中，前进到下一个页面

芜湖~