vue中页面跳转的几种方法总结

一、router-link标签跳转

在html标签内使用router-link跳转，相应于超链接标签，使用方式如下：

<router-link to="/">xxx</router-link>

但是a标签和router-link还有一点区别的：
a标签
W3C中的解释：a标签定义超链接，用于从一个页面链接到另一个页面

个人理解：通过a标签进行跳转，页面会被重新渲染，即相当于重新打开一个新的网页，会有视觉上的“闪烁”（如果是本地的项目可能看不出来）

router-link
通过router-link进行跳转不会跳转到新的页面，也不会重新渲染，它会选择路由所指的组件进行渲染，避免了重复渲染页面，只更新变化的部分，减少DOM性能消耗

二、代码内部跳转

实际项目中，很多时候都是通过在JS代码内部进行导航的跳转，使用方式如下：

（1）先编写一个按钮，在按钮上绑定goHome( )方法。

<button @click="goHome">回到首页</button>

（2）在script模块里加入goHome方法，并用this.$router.push(‘/’)导航到首页

export default {
    name: 'app',
    methods: {
        goHome(){
            this.$router.push('/dashboard');
        }
    }
}

三、其他常用方法

//  后退一步记录，等同于 history.back()
this.$router.go(-1)
// 在浏览器记录中前进一步，等同于 history.forward()
this.$router.go(1)