vue-router之页面跳转（二）

一、router-link标签跳转

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

<router-link to="/">[显示字段]</router-link>

to：导航路径
使用示例如下：

<p>导航 ：   <router-link to="/">首页</router-link>
   <router-link to="/hello">hello</router-link></p>

二、编程式导航-JS代码内部跳转

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

this.$router.push('/xxx')

具体的简单用法：
（1）先编写一个按钮，在按钮上绑定goHome( )方法。

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

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

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

三、其他常用方法

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