vue3路由跳转的三种方式

在Vue 3中，路由跳转主要通过Vue Router来实现。Vue Router是Vue.js的官方路由管理器，它允许你在不同视图之间进行导航。以下是Vue 3中使用Vue Router进行路由跳转的三种主要方式：

1. 使用<router-link>组件

<router-link>是Vue Router提供的组件，用于创建导航链接。它会自动渲染为<a>标签，并处理点击事件以进行页面跳转。

<!-- 跳转到/about路径 -->
<router-link to="/about">About</router-link>

2. 使用router.push()方法

router.push()方法用于向历史堆栈添加一个新的条目，并触发页面的跳转。你可以在组件的方法中使用这个方法。

// 在Vue组件中
export default {methods: {goToAbout() {this.$router.push('/about');}}
}

或者，如果你使用的是Vue 3的Composition API，可以这样写：

import { useRouter } from 'vue-router';export default {setup() {const router = useRouter();const goToAbout = () => {router.push('/about');};return { goToAbout };}
}

3. 使用router.replace()方法

与router.push()类似，router.replace()也是用来导航的，但它不会向历史堆栈添加新的记录。这意呀着用户无法通过浏览器的后退按钮返回到之前的页面。

// 在Vue组件中
export default {methods: {goToHome() {this.$router.replace('/');}}
}

或者，使用Composition API：

import { useRouter } from 'vue-router';export default {setup() {const router = useRouter();const goToHome = () => {router.replace('/');};return { goToHome };}
}

总结：

• <router-link>：用于创建导航链接，自动处理点击事件。

• router.push()：添加新的历史记录条目并跳转。

• router.replace()：替换当前历史记录条目并跳转，不留下历史记录。

这些方法可以根据你的具体需求选择使用，以实现页面的导航和跳转。