【Vue】编程式导航-两种路由跳转方式




<template>
  <div>
    <button @click="navigateToProfile">Go to Profile</button>
    <button @click="navigateToSettings">Go to Settings</button>
  </div>
</template>
 
<script>
export default {
  methods: {
    navigateToProfile() {
      // 使用编程式导航跳转到用户个人资料页面
      this.$router.push({ name: 'profile' });
    },
    navigateToSettings() {
      // 使用编程式导航跳转到用户设置页面
      this.$router.push({ path: '/settings' });
    }
  }
}
</script>

这个例子中，我们定义了两个方法navigateToProfile和navigateToSettings，它们通过调用Vue Router的push方法实现了编程式的路由跳转。在实际应用中，你可以根据需要将这些方法应用到你的Vue组件中。

【Vue】编程式导航-两种路由跳转方式

评论已关闭

推荐阅读