除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。即：通过js动态的进行导航链接。
一、this.$router.push( )
router.push(location, onComplete?, onAbort?)
注意：在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。
想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)。
效果：
二、this.$router.replace()；用法同this.$router.replace()
router.replace(location, onComplete?, onAbort?)
跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录(地址栏中)，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
三、this.$router.go()
小结：
router.push(location)
想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
router.replace(location)
跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
router.go(n)
这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)
若有不足请多多指教！希望给您带来帮助！
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对北冥有鱼的支持。如果你想了解更多相关内容请查看下面相关链接
您可能感兴趣的文章:
- vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
- VUE元素的隐藏和显示（v-show指令)
- vueJS简单的点击显示与隐藏的效果【实现代码】
- vue.js 左侧二级菜单显示与隐藏切换的实例代码
- vue组件实现弹出框点击显示隐藏效果
- vue实现密码显示隐藏切换功能
- elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
- Vue.js 点击按钮显示/隐藏内容的实例代码
- vue.js使用v-if实现显示与隐藏功能示例
- vue中改变选中当前项的显示隐藏或者状态的实现方法
- Vue隐藏显示、只读实例代码
- vue实现动态显示与隐藏底部导航的方法分析
