大部分摘抄至https://juejin.cn/post/7511568225987051555?searchId=202508041118462C6329C8A295609FB176#heading-36
1.Vue-Router 4.0X核心变化
- 创建路由
import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
history: createWebHistory(), // 或 createWebHashHistory
routes: [...]
});
2.组合式API支持
- useRouter() 获取路由实例（替代this.$router）
- useRoute() 获取当前路由对象（替代this.$route）
2. 路由配置与核心概念
1.动态路由
{ path: '/user/:id', component: User };
// 获取参数：route.params.id
2.嵌套路由
{
path: '/parent',
component: Parent,
children: [
{ path: 'child', component: Child }
]
}
- 命名路由与编程式导航
router.push({ name: 'user', params: { id: 1 } });
4.路由模式
- createWebHistory()：History模式（需服务器支持）
History模式利用了HTML5的History API，允许我们使用“真实”的URL路径，而不是依赖#符号。通过这种方式，URL看起来更“干净”，并且支持浏览器的前进、后退操作
http://example.com/user/1
History模式的优缺点
优点: 更美观的URL，更好的用户体验，适合SEO。
缺点: 需要服务器配置，确保所有路径都指向应用的入口HTML文件。
- createWebHashHistory()：Hash模式
Hash模式是Vue Router的默认模式，它通过URL中的#符号来模拟不同的路径。由于#之后的内容不会被发送到服务器，所有的路径解析都在客户端进行，这种方式简单且兼容性好。
http://example.com/#/user/1
在这个URL中，#/user/1是Hash路径，浏览器只会将http://example.com/发送到服务器。
Hash模式的优缺点
优点: 兼容性好，无需服务器配置。
缺点: URL中有#符号，不够美观，且对于SEO不友好。
- createMemoryHistory()：SSR或测试环境
5.重定向与别名
{ path: '/home', redirect: '/' }//redirect 重定向
{ path: '/', alias: 'home' }//alias 别名
3.导航守卫
1.全局守卫
- router.beforeEach((to, from, next) => { ... })
- router.afterEach((to, from) => { ... })
- router.beforeResolve()
to:router即将进入的路由对象;
from:当前导航即将离开的路由;
next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航
2.路由独享守卫
独享路由守卫是Vue Router提供的一种守卫方式，它只作用于某个特定的路由，而不像全局守卫那样作用于所有的路由。独享守卫允许我们在定义路由时，为某个路由添加特定的守卫逻辑。
{
path: '/admin',
component: Admin,
beforeEnter: (to, from, next) => { ... }
}
3.组件内守卫
onBeforeRouteUpdate：路由参数变化
onBeforeRouteLeave：离开组件前
组件内路由守卫是定义在组件中的守卫，它们可以直接访问组件实例的属性和方法，因此可以更加灵活地处理与组件相关的导航逻辑。Vue.js 提供了以下三个组件内守卫钩子：
import { onBeforeRouteLeave } from 'vue-router';
export default {
setup() {
onBeforeRouteLeave((to, from, next) => {
// 清理逻辑
next();
});
}
};
4.高级特性与最佳实践
1.路由懒加载
懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。
const User = () => import('./User.vue');
const User = defineAsyncComponent(() => import('./User.vue'));
你需要对懒加载的组件进行更细粒度的控制（例如，处理加载状态和错误），你可以使
const routes = [
{
path: '/',
name: 'Home',
component: defineAsyncComponent(() => import('./views/Home.vue'))
},
{
path: '/about',
name: 'About',
component: defineAsyncComponent({
loader: () => import('./views/About.vue'),
loadingComponent: LoadingComponent, // 加载时的组件
errorComponent: ErrorComponent, // 加载失败时的组件
delay: 200, // 延迟显示加载组件，单位为毫秒 (可选)
timeout: 3000, // 超过此时间则显示错误组件 (可选)
// 其他选项...
})
}
];
2.路由元信息（meta）
{ path: '/profile', meta: { requireAuth: true } }
// 在导航守卫中访问：to.meta.requiresAuth
3.动态路由
添加路由：router.addRoute({ path: '/new', component: New })
删除路由：router.removeRoute('route-name')
4.路由组件传参
{ path: '/user/:id', component: User, props: true }
// 组件通过props：['id'] 接收
5.滚动行为控制
const router = createRouter({
scrollBehavior(to, from, savedPosition) {
return savedBehavior || { top: 0 };
}
});
5.Vue-Router 4.X 与 3.X 的主要区别
API命名调整（如new VueRouter() -> createRouter()）
组合式API支持（useRouter/useRoute）
动态路由API优化（addRoute/removeRoute）
2.如何实现路由权限控制
全局守卫 + 元信息
router.beforeEach((to, from, next) => {
if(to.meta.requireAuth && !isAuthenticated) next('/login');
else next();
});
3.如何处理动态路由加载顺序问题
router.isReady()：确保初始路由解析完成再挂载应用
router.isReady().then(() => app.mount('#app'));
4.如何捕获导航错误
router.onError((error) => {
console.error('导航错误', error);
});
5.路由组件如何复用并响应参数变化
onBeforeRouteUpdate：监听路由参数变化
onBeforeRouteUpdate((to, form, next) => {
fetchData(to.params.id);
next();
})
6.实战场景示例
const dynamicRoutes = [
{ path: '/admin', component: Admin, meta: { role: 'admin' } }
];
if (user.role === 'admin') {
dynamicRoutes.forEach(route => router.addRoute(route));
}
// 路由懒加载与预加载（webpack魔法注释）
const Home = () => import( /* webpackPrefetch: true */ './Home.vue' );
7.注意事项
this.$router的兼容性：选项式API中仍可用，组合式API推荐useRouter
SSR适配：需使用createMemoryHistory并处理客户端激活
路由命名冲突：动态路由添加时注意避免重复路径或名称
导航守卫异步处理：确保调用next()或返回Promise
