vue-router：页面跳转

发表于 | 分类于 ， | 阅读 次
vue-router页面跳转

标签跳转

to：导航路径

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

JS代码内跳转

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

具体简单用法：

  • 先编写一个按钮，在按钮上绑定goHome方法
1
<button @click='goHome'>回到首页</button>
  • 在<script>模块的methods里加入goHome方法，并用this.$router.push('/')导航到首页
1
2
3
4
5
6
7
8
export default {
    name: 'app',
    methods: {
        goHome(){
            this.$router.push('/home');
        }
    }
}

其他

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

参考教程