Vue3.0 页面跳转的 5 种方式

Vue3.0 提供了多种用于页面跳转的方式。以下是其中的 5 种常用方式：

1. 利用 “ 标签进行跳转：可以使用 “ 标签来创建链接，它会自动生成对应的路由路径和监听点击事件，实现页面的无刷新跳转。

示例代码：

“`html

Home

“`

2. 利用 JS 编程式导航进行跳转：可以使用 `router.push()` 方法在JavaScript中进行编程式导航，通过指定目标路由的路径实现页面跳转。

示例代码：

“`js

this.$router.push(‘/home’);

“`

3. 利用 `` 标签进行跳转：除了使用Vue提供的路由功能，也可以使用传统的 `` 标签进行页面跳转，但需要注意的是，这种方式会导致页面刷新。

示例代码：

“`html

Home

“`

4. 利用 `window.location` 进行跳转：可以使用 `window.location.href` 或 `window.location.replace()` 方法进行页面跳转，但同样会导致页面刷新。

示例代码：

“`js

window.location.href = ‘/home’;

“`

5. 利用路由导航守卫进行跳转：Vue3.0 中提供了多个导航守卫（beforeEach、beforeResolve、afterEach），可以通过在导航守卫中进行相关判断和处理，实现页面跳转。

示例代码：

“`js

router.beforeEach((to, from, next) => {

// 判断条件

if (需要跳转) {

next(‘/home’);

} else {

next();

}

});

“`

以上是常用的 5 种 Vue3.0 页面跳转方式，根据实际业务需求选择适合的方式即可。