Vue.js 路由

Vue Router 是 Vue.js 的官方路由管理器用于构建单页应用SPA实现页面组件的切换、参数传递、导航守卫等功能。以下是 Vue Router 的核心用法以Vue 3 Vue Router 4为主同时标注 Vue 2 的差异一、安装# Vue 3npminstallvue-router4# Vue 2npminstallvue-router3二、基础配置1. 创建路由实例// router/index.jsimport{createRouter,createWebHistory}fromvue-router;importHomefrom../views/Home.vue;importAboutfrom../views/About.vue;constroutes[{path:/,component:Home},{path:/about,component:About},];constroutercreateRouter({history:createWebHistory(),// Vue 3 默认使用 history 模式routes,});exportdefaultrouter;Vue 2 写法importVuefromvue;importVueRouterfromvue-router;Vue.use(VueRouter);constrouternewVueRouter({mode:history,// 或 hashroutes,});2. 挂载到应用// main.jsimport{createApp}fromvue;importAppfrom./App.vue;importrouterfrom./router;constappcreateApp(App);app.use(router);app.mount(#app);三、核心组件1.router-link导航链接templatenav!-- 默认渲染为 a 标签点击自动跳转 --router-linkto/首页/router-linkrouter-linkto/about关于/router-link!-- 指定 tag 属性渲染为其他标签Vue 2 --router-linkto/hometagbutton首页/router-link!-- Vue 3 使用 v-slot 自定义 --router-linkto/homev-slot{ navigate, href, isActive }a:hrefhref:class{ active: isActive }clicknavigate首页/a/router-link/nav/template2.router-view路由出口templatedividapprouter-view/!-- 组件渲染在这里 --/div/template四、路由配置详解1. 动态路由参数constroutes[{path:/user/:id,component:User},{path:/post/:id/comment/:commentId,component:Comment},];router-link:to/user/ userId用户详情/router-link// User.vue 中获取参数import{useRoute}fromvue-router;constrouteuseRoute();console.log(route.params.id);// 获取 :id 的值2. 查询参数Queryrouter-link:to{ path: /search, query: { q: vue, page: 1 } }搜索/router-link// 获取 queryconsole.log(route.query.q);// vueconsole.log(route.query.page);// 13. 嵌套路由子路由constroutes[{path:/user,component:User,children:[{path:profile,component:UserProfile},// 完整路径: /user/profile{path:settings,component:UserSettings},],},];!-- User.vue --templatedivh1用户中心/h1router-linkto/user/profile个人资料/router-linkrouter-linkto/user/settings设置/router-linkrouter-view/!-- 子组件渲染在这里 --/div/template4. 重定向与别名constroutes[{path:/,redirect:/home},// 访问 / 跳转到 /home{path:/home,component:Home},{path:/h,alias:/home},// 访问 /h 等同于 /home];五、编程式导航在组件内使用useRouter钩子进行跳转import{useRouter,useRoute}fromvue-router;constrouteruseRouter();constrouteuseRoute();// 跳转router.push(/about);// 带参数router.push({name:User,params:{id:123}});// 带查询参数router.push({path:/search,query:{q:vue}});// 替换当前历史记录不可回退router.replace(/login);// 前进/后退router.go(-1);// 后退一页router.go(1);// 前进一页六、导航守卫路由拦截1. 全局守卫// router/index.jsrouter.beforeEach((to,from,next){constisAuthenticatedlocalStorage.getItem(token);if(to.meta.requiresAuth!isAuthenticated){next(/login);// 未登录跳转到登录页}else{next();// 放行}});2. 路由独享守卫constroutes[{path:/admin,component:Admin,beforeEnter:(to,from,next){if(isAdmin()){next();}else{next(/403);}},},];3. 组件内守卫exportdefault{beforeRouteEnter(to,from,next){// 组件实例还没创建this 不可用next(vm{vm.fetchData();});},beforeRouteUpdate(to,from,next){// 当前组件复用参数变化时触发this.fetchData(to.params.id);next();},beforeRouteLeave(to,from,next){// 离开当前路由时触发if(this.hasUnsavedChanges){constanswerwindow.confirm(有未保存内容确定离开吗);next(answer);}else{next();}},};七、路由元信息Meta在路由配置中添加自定义字段constroutes[{path:/admin,component:Admin,meta:{requiresAuth:true,role:admin},},];在守卫中读取router.beforeEach((to,from,next){if(to.meta.requiresAuth!isAuthenticated){next(/login);}elseif(to.meta.role!hasRole(to.meta.role)){next(/403);}else{next();}});八、懒加载代码分割优化性能按需加载路由组件constroutes[{path:/about,component:()import(../views/About.vue),// 只有访问时才加载},];九、Vue 2 vs Vue 3 关键差异特性Vue 2 (Router 3)Vue 3 (Router 4)创建路由new VueRouter()createRouter()创建历史mode: historycreateWebHistory()获取路由this.$routeuseRoute()获取导航this.$routeruseRouter()组件内守卫beforeRouteEnter同上动态参数this.$route.paramsroute.params导航守卫router.beforeEach同上十、总结功能核心 API路由配置createRouter({ routes })导航链接router-link to...路由出口router-view /编程跳转router.push(),router.replace()获取参数route.params,route.query导航守卫router.beforeEach(),beforeRouteEnter懒加载() import(...)核心流程定义路由配置路径 → 组件映射创建路由实例并挂载使用router-link和router-view构建页面利用导航守卫处理权限、数据加载等逻辑Vue Router 是 Vue 生态中不可或缺的一部分熟练掌握它能极大提升开发效率。