【Vue | 补洞 | 18】编程式路由导航

不借助 <router-link> 进行路由跳转操作，更加灵活和方便！

1. 作用

通过 API 的方式，不借助 <router-link> 进行路由操作

2. 写法

1）跳转页面

• 跳转路由页面，并保留在历史记录中
• push 中的配置参数和 router-link 中的 to 属性配置的参数一致

// xxx.vue
...
export default {
	methods: {
        navigateTo() {
            this.$router.push({
                name: 'home',
                path: '/home',
                query: { ... }
            })
        }
    }
}

2）回退

• 回退至上一个路由页面（与浏览器的后退类似）

// xxx.vue
...
export default {
	methods: {
        back() {
            this.$router.back()
        }
    }
}

3）前进

• 前进至下一个路由页面（与浏览器的前进类似，前提是有可以前进的页面的话）

// xxx.vue
...
export default {
	methods: {
        forward() {
            this.$router.forward()
        }
    }
}

4）按步数前进或回退

• go(x)：该方法接收一个参数，正数表示前进x步，负数为后退x步

// xxx.vue
...
export default {
	methods: {
        go() {
            this.$router.go(5)
        }
    }
}

5）替换当前路由，并跳转

使用 $router.push 的情况下，现有记录 A -> B，此时通过 push 跳转到 C，则历史记录中有：A -> B -> C；

使用 $router.replace 的情况下，现有记录 A -> B，此时通过 replace 跳转到 C，则历史记录中只会存留 A -> C 的记录

// xxx.vue
...
export default {
	methods: {
        replaceTo() {
            this.$router.replace({
                name: 'home',
                path: '/home',
                query: { ... }
            })
        }
    }
}

提示：在 <router-link> 中，通过配置 replace 属性来实现 [替换路由] 模式，写法：<router-link replace>

3. 总结

• 编程式路由导航与 <router-link> 的区别
  • <router-link> 最终会编译成 <a> 标签；编程式路由导航支持通过非<a> 标签编写的路由跳转事件（如 button）
  • <router-link> 需要提前编写并占位；编程式路由导航可以 灵活 地在业务逻辑需要的地方进行跳转

更多相关文章，推荐阅读来补充知识体系~
【Vue | 补洞 | 15】路由和路由器，傻傻分不清
【Vue | 补洞 | 16】嵌套路由
【Vue | 补洞 | 17】路由传参 & 路由prop配置
【Vue | 补洞 | 19】路由守卫