前言
Vue Router 是构建单页应用（SPA）不可或缺的一部分，它允许我们通过改变 URL 来展示不同的页面内容而不必重新加载整个页面。
Vue Router 与 Vue.js 核心深度集成，提供了灵活的路由配置和导航功能，让开发者可以轻松地构建复杂的前端应用。
路由
前端路由 vs 后端路由
在 SPA 中，前端路由是关键，它实现了前后端分离，增强了用户体验，因为页面不会因用户的操作而重新加载或跳转。
相比之下，后端路由每次 URL 变化都会向服务器发送请求，虽然减轻了前端的压力，但依赖于网络环境，可能导致较差的用户体验，并且增加了服务器端的负担。
路由模式
Hash 模式
Hash 模式利用 URL 的哈希部分来实现路由变化，例如：
window.onhashchange = function(event) {
console.log('Old URL:', event.oldURL);
console.log('New URL:', event.newURL);
let hash = location.hash.slice(1); // Remove the leading '#'
};
这种模式下，URL 改变不会触发新的请求，非常适合不希望刷新页面的应用。
History 模式
History 模式则更加优雅，使用 HTML5 提供的 pushState 和 replaceState 方法，配合 onpopstate 事件监听器，可以在不刷新页面的情况下修改 URL 并加载对应的内容。不过，这要求服务器正确配置以避免 404 错误：
history.pushState({}, null, '/new-url');
window.onpopstate = function(event) {
// Handle page content update based on new state
};
组件关联与路由映射
为了将 URL 映射到特定的组件，我们定义路径和对应的组件：
const routes = [
{ path: '/', component: Home },
{ path: '/user/:id', component: User }
];
这里 /user/:id 就是一个动态路由的例子，:id 是一个参数名，可以通过 this.$route.params.id 获取。
导航守卫
Vue Router 提供了多种守卫函数，用于控制导航行为。比如全局守卫 beforeEach，可以在每次导航之前执行，常用于权限验证：
router.beforeEach((to, from, next) => {
// Perform checks and call next() to proceed
});
还有 beforeRouteEnter 这样的组件内守卫，可以在进入组件前调用，且需要通过 next(vm => {}) 访问组件实例。
组件与路由交互
router-link 和 router-view
<router-link> 实质上是一个带有 to 属性的 <a> 标签，用来创建链接；而 <router-view> 则是用来显示当前匹配组件的地方。
例如：
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
<router-view></router-view>
keep-alive
<keep-alive> 组件用于缓存视图，减少不必要的渲染开销。当包含在 <keep-alive> 中时，组件会在切换时保留状态：
<keep-alive>
<router-view></router-view>
</keep-alive>
并且，组件会获得 activated 和 deactivated 生命周期钩子，可以在这里处理缓存逻辑。
初始化与匹配
安装插件并初始化路由是在项目启动时完成的工作。一旦安装了 Vue Router 插件，就可以通过 Vue.use(VueRouter) 完成安装，之后便可在根实例中使用 new VueRouter() 创建路由实例。
import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
const app = createApp(App);
const router = createRouter({
history: createWebHistory(),
routes: [...]
});
app.use(router).mount('#app');
参数响应与数据获取
对于动态路由参数的变化，我们可以利用 watch 或者 beforeRouteUpdate 守卫来监听 $route 对象的变化，并根据新值更新组件状态。
watch(() => $route.params.userId, (newUserId) => {
fetchData(newUserId);
});
// Or using beforeRouteUpdate
beforeRouteUpdate(to, from, next) {
this.fetchData(to.params.userId);
next();
}
此外，在 keep-alive 缓存后的组件中，我们还可以在 activated 钩子中确保组件激活时能够获取最新的数据。
总结
以上就是关于 Vue3 路由的一些核心知识点。掌握这些，你就能更好地理解如何在 Vue 应用中管理路由和页面之间的导航。
