this.$router 示例

以下是一个使用this.$router进行路由跳转的示例代码：

<template>
  <div>
    <button @click="goToHome">Go to Home</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToHome() {
      this.$router.push('/home') // 使用this.$router实例进行路由跳转
    }
  }
}
</script>

在这个示例中，我们在Vue组件中定义了一个按钮，当用户点击该按钮时，调用goToHome方法，使用this.$router.push方法进行路由跳转，跳转到路径为'/home'的路由页面。

相关问题

使用 this.$router.onReady() 确保 router 已经准备就绪示例

在 Vue.js 中，我们可以使用 this.$router.onReady() 方法来确保路由已经准备就绪，然后再进行操作。下面是一个示例：

export default {
  data() {
    return {
      isLoading: true,
      data: null
    }
  },
  mounted() {
    this.$router.onReady(() => {
      // 路由已经准备就绪
      this.loadData()
    })
  },
  methods: {
    async loadData() {
      try {
        const response = await fetch('/api/data')
        const data = await response.json()
        this.data = data
      } catch (error) {
        console.error(error)
      } finally {
        this.isLoading = false
      }
    }
  }
}

在上面的代码中，我们在 mounted 钩子函数中使用 this.$router.onReady() 方法来确保路由已经准备就绪，然后调用 loadData 方法来加载数据。如果路由没有准备就绪，loadData 方法就不会被调用。这样就可以避免因为路由没有准备就绪而导致的错误。

vue3中this.$router.push使用代码示例

在Vue 3中，使用`this.$router.push`进行路由跳转的示例代码如下：

// 导入Vue Router
import { createRouter, createWebHistory } from 'vue-router';

// 创建路由实例
const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 定义路由配置
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
});

// 在组件中使用this.$router.push进行路由跳转
export default {
  methods: {
    redirectToAbout() {
      this.$router.push('/about');
    }
  }
}