简述Vue 3中的路由和Vue Router 4有哪些变化 ？

Vue Router 4 是专为 Vue 3 设计的路由库，相较于 Vue 2 时代的 Vue Router 3，有以下核心变化和优化：

1. 安装与初始化

• Vue 3 适配：需基于 Vue 3 的 createApp 初始化。

  javascript复制import { createRouter, createWebHistory } from 'vue-router';const router = createRouter({  history: createWebHistory(),  routes: [...],});const app = createApp(App).use(router).mount('#app');

2. 路由模式定义

• 历史模式 API：使用 createWebHistory（SPA）、createWebHashHistory（Hash）、createMemoryHistory（SSR）。

  javascript复制createRouter({  history: createWebHashHistory(), // 替代原 mode: 'hash'});

3. Composition API 支持

• **useRouter 与 useRoute**：在 setup() 中访问路由实例和当前路由。

  javascript复制import { useRoute, useRouter } from 'vue-router';export default {  setup() {    const route = useRoute();    const router = useRouter();    router.push(`/user/${route.params.id}`);  }};

4. 路由匹配语法变更

• 通配符 * 废弃：改用 pathMatch 参数匹配未定义路由。

  javascript复制{ path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound }

  • 访问 route.params.pathMatch 获取未匹配路径。

5. 导航守卫 next 参数变更

• **next 变为可选**：推荐通过返回值控制导航。

  javascript复制beforeEnter(to, from) {  if (!isAuthenticated) return '/login'; // 返回路径或布尔值}

6. 动态路由管理

• **addRoute 和 removeRoute**：动态添加/删除路由更灵活。

  javascript复制router.addRoute({ path: '/new', component: NewRoute }); // 添加路由router.addRoute('parent', { path: 'child', component: Child }); // 嵌套子路由router.removeRoute('route-name'); // 通过名称删除

7. 滚动行为改进

• 返回 ScrollToOptions 对象：更符合浏览器原生行为。

  javascript复制scrollBehavior(to, from, savedPosition) {  return savedPosition || { top: 0, behavior: 'smooth' };}

8. TypeScript 增强

• 类型安全的路由元数据 (meta)：通过扩展 RouteMeta 接口定义类型。

  typescript复制declare module 'vue-router' {  interface RouteMeta {    requiresAuth?: boolean;  }}

9. 路由别名 (alias) 和重定向 (redirect)

• 别名支持数组：允许多个别名。

  javascript复制{ path: '/home', component: Home, alias: ['/root', '/index'] }

• 重定向更灵活：支持返回路由位置对象。

  javascript复制redirect: { name: 'home' } // 替代路径字符串

10. 其他改进

• **router.isReady()**：确保初始导航完成后再挂载应用。

  javascript复制router.isReady().then(() => app.mount('#app'));

• 支持 Suspense：异步路由组件无缝集成 Vue 3 的 <Suspense>。

• Fragment 支持：路由组件允许多根节点。

总结

Vue Router 4 深度适配 Vue 3 的响应式和 Composition API，优化了动态路由管理、类型支持，并简化了导航守卫的使用。开发者需注意路由语法变更（如通配符替换）和初始化方式调整，以充分利用新特性提升开发体验和代码健壮性。