vue页面跳转怎么实现？

vue页面跳转的方法有以下几种：

1.router-link

<router-link to="/">[主页]</router-link>

<router-link to="/prew">[上一页]</router-link>

<router-link to="/next">[下一页]</router-link>

2.this.$router.push('/路径')

此方法可以带参数跳转:

this.$router.push({path:'/testDemo',query:{setid:123456}});
this.$router.push({name:'testDemo',params:{setid:111222}});

接收参数：

<template>
 <div>
 Demo{{this.$route.query.setid}}
 </div>
</template>

其中，params传参数(可为对象)时，地址栏中看不到参数的内容，有点像ajax中的post传参，query传参数时，地址栏中可以看到传过来的参数信息，有点像ajax的个体传参。

使用示例：

<template>
<div class="moban" >
    <div>第{{num}}课</div>
    <div>{{msg}}</div>
    <p v-html="info"></p>
    <button @click="goHome">[跳转到主页]</button>
</div>
</template>

<script>
export default {
  name: 'moban',
  data () {
    return {
      num: 1,
      msg: 'vue模板概览',
      info: '1.差值表达式<br>2.指令<br>3.事件绑定<br>4.属性绑定<br>5.样式绑定<br>6.分支循环结构'
    }
  },
  methods: {
    goHome () {
      this.$router.push('/')
    }
  }
}
</script>

<style scoped>
h1, h2 {
  font-weight: normal;
}
</style>

3.this.$router.go(1)，使用示例如下：

<template>
<div class="moban" >
    <div>第{{num}}课</div>
    <div>{{msg}}</div>
    <p v-html="info"></p>
    <button @click="goHome">[跳转到主页]</button>
    <button @click="prewPage">[跳转到上一页]</button>
    <button @click="nextPage">[跳转到下一页]</button>
</div>
</template>

<script>
export default {
  name: 'moban',
  data () {
    return {
      num: 1,
      msg: 'vue模板概览',
      info: '1.差值表达式<br>2.指令<br>3.事件绑定<br>4.属性绑定<br>5.样式绑定<br>6.分支循环结构'
    }
  },
  methods: {
    goHome () {
      this.$router.push('/')
    },
    prewPage () {
      this.$router.go(-1)
    },
    nextPage () {
      this.$router.go(1)
    }
  }
}
</script>

<style scoped>
h1, h2 {
  font-weight: normal;
}
</style>

最后补充一下：a标签可以跳转么？可以跳转外部链接，不能路由跳转

<a href="https://www.baidu.com"><button>点击跳转5</button></a>

演示地址:http://vue.xiuyixia.com/#/moban