Vue通过JS跳转路由

这里我们通过输出$router来查看，其中push和replace函数就是跳转其他路由的函数

其中push函数是跳转新的路由，跳转后可以通过浏览器的回退功能回退到上一个路由

而replace函数是替换当前路由，替换之后不能通过回退来回到上一个路由
具体使用如下（在之前的案例上加入一个按钮）：

<template>
  <div class="container">
      <div class="tab">
          <button @click="gotoCircle">首页</button>
          <router-link class="tab-item" active-class="active" :to="{
              name:'Home',
              params:{
                  type:0,
                  name:'首页'
              }
          }">首页</router-link>
          <router-link class="tab-item" active-class="active" to="/About">关于</router-link>
      </div>
      <router-view></router-view>
  </div>
</template>

添加gotoCircle函数，这里我们使用push函数做演示，replace函数的传参和push一样，就不多做演示了

<script>

export default {
  name: 'app',
  mounted(){
      console.log(this.$router)
  },
  methods: {
    gotoCircle() {
        this.$router.push({
              name:'Home',
              params:{
                  type:0,
                  name:'首页'
              }
          })
    }
  }
}
</script>

这里的传参与上面v-bind绑定的参数一样都是传一个对象，运行效果如下：