目录
Vue 3 中页面跳转方式的详细介绍
Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架，它提供了多种方法来实现页面之间的导航。在 Vue 3 中，页面跳转主要通过 Vue Router 来管理，同时也支持其他方式如编程式导航和使用锚点链接。本文将详细介绍 Vue 3 中的各种页面跳转方式，并通过具体的代码示例帮助你更好地掌握这些功能。
使用 Vue Router 实现页面跳转
Vue Router 是官方推荐的路由管理器，它可以轻松地为 Vue 应用添加单页应用（SPA）的功能。通过 Vue Router，你可以定义多个路由规则，并根据用户的操作动态切换不同的视图，而无需重新加载整个页面。
安装 Vue Router
首先，确保你的项目中已经安装了 Vue Router：
npm install vue-router@4然后，在项目的入口文件中引入并配置 Vue Router：
// main.js 或 main.ts
import { createApp } from 'vue';
import App from './App.vue';
import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
];
const router = createRouter({
history: createWebHistory(),
routes
});
createApp(App).use(router).mount('#app');声明式导航 - <router-link> 标签
<router-link> 是 Vue Router 提供的一个组件，用于创建带有路由链接的 HTML 元素。点击这些链接时，Vue Router 会自动处理 URL 的变化，并更新相应的视图内容。
示例：基础用法
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<router-view></router-view>
</div>
</template>在这个例子中，<router-link> 会生成带有 href 属性的 <a> 标签，默认情况下点击后会触发路由的切换。
参数传递
如果你需要传递参数给目标页面，可以使用 to 属性中的对象形式：
<router-link :to="{ name: 'user', params: { userId: 123 }}">User Profile</router-link>这里假设你已经在路由配置中定义了一个名为 user 的命名路由，并且该路由接受一个名为 userId 的参数。
编程式导航
除了使用 <router-link> 进行声明式的导航外，Vue Router 还允许你通过 JavaScript 代码来进行编程式的页面跳转。这在某些场景下非常有用，比如响应按钮点击事件或表单提交后的重定向。
示例：基础用法
this.$router.push('/about');或者使用命名路由和参数：
this.$router.push({ name: 'user', params: { userId: 123 } });路由守卫
编程式导航经常与路由守卫一起使用，以控制何时何地进行页面跳转。例如，在离开当前页面前确认用户是否保存了更改：
beforeRouteLeave(to, from, next) {
const answer = window.confirm('Do you really want to leave? You have unsaved changes!');
if (answer) {
next();
} else {
next(false);
}
}动态路由匹配
Vue Router 支持动态路由匹配，这意味着你可以定义包含占位符的路径，从而根据不同的参数展示不同的内容。例如：
const routes = [
{ path: '/user/:id', component: User }
];在这种情况下，:id 是一个动态段，当用户访问 /user/123 时，Vue Router 会将 123 作为参数传递给 User 组件。
导航守卫
Vue Router 提供了多种全局、局部和组件内的导航守卫，可以在不同阶段对导航行为进行拦截和处理。常用的包括：
- 全局前置守卫 (
beforeEach) - 全局解析守卫 (
beforeResolve) - 全局后置钩子 (
afterEach) - 路由独享的守卫
- 组件内的守卫
示例：全局前置守卫
const router = createRouter({
// ...
});
router.beforeEach((to, from, next) => {
// 这里可以执行一些逻辑，比如检查登录状态等
console.log(`Navigating from ${from.path} to ${to.path}`);
next(); // 确保调用 next() 否则不会继续导航
});使用锚点链接进行页面内跳转
有时我们不需要改变页面的整体布局，而是希望在同一页面内滚动到特定部分。这时可以使用普通的 HTML 锚点链接：
<a href="#section-1">Go to Section 1</a>
<!-- 页面其他内容 -->
<div id="section-1">
<h2>Section 1</h2>
<!-- 更多内容 -->
</div>这种方式适用于页面内的快速导航，尤其是在长文档或复杂的单页应用中。
使用浏览器 API 进行页面跳转
对于某些特殊情况，可能需要直接使用浏览器提供的 API 来进行页面跳转，例如 window.location.href 或 window.history.pushState()。然而，通常建议尽量使用 Vue Router 来管理 SPA 中的导航，以保持一致性和更好的用户体验。
示例：使用 window.location.href
window.location.href = '/about';这种方法会导致页面刷新，因此只应在确实需要的情况下使用。