编程式跳转

编程式跳转

首先先创建个按钮和事件并且绑定 

然后我们点击按钮之后就执行代码最后执行跳转

全代码：

<template>
  <div>
    <!-- 标签式跳转 -->
    <h2>标签式跳转</h2>
      <router-link to="/">首页</router-link>
      <router-link to="/helloword">helloword</router-link>
      <router-link to="/about">about</router-link>
      <br>
    <!-- 编程式跳转 -->
    <h2>编程式跳转</h2>
      <button @click="gohelloword()">3s后切换到hell oword</button>
    <!-- 占位符:被替换成对应组件 -->
  </div>
</template>

<script>
  export default {
    methods:{
      gohelloword(){
        var number =3;
        console.log(this);
        //在后台找到router

        // 在vue对象中有很多$开头的属性
        // vue自带属性都是$开头的
        // 定时器
        setInterval(()=>{
          number--;
          console.log(number);
          if(number==0) this.$router.push("/helloword");
        },1000);
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>

上篇文章 ：

浅谈VUE路由器系统_阿山同学.的博客-CSDN博客https://blog.csdn.net/weixin_50112395/article/details/124921571?spm=1001.2014.3001.5502