vue-router笔记0. 前言核心内容vue-router 路由、路由懒加载、魔法注释、编程式导航、嵌套路由、Element-Plus 布局难度基础中等用途Vue 项目页面跳转、多页面展示、后台布局管理一、vue-router 是什么根据浏览器地址栏路径动态切换显示不同组件路径/→ 显示首页路径/user→ 显示用户页路径/order→ 显示订单页不需要刷新页面组件自动替换展示。二、路由三要素VueRouter路由器管理所有路由规则router-link路由链接 → 最终渲染成a标签router-view路由视图 → 路径匹配的组件在这里显示三、路由懒加载性能优化component:()import(../views/HomeView.vue)访问时才加载组件项目启动更快打包体积更小四、魔法注释 webpackChunkName给打包后的文件起名()import(/* webpackChunkName: home */../views/HomeView.vue)打包后home.js不加注释132.js作用方便调试、优化打包、可读性更高。五、编程式路由跳转JS 跳转// 字符串this.$router.push(/home)// 对象this.$router.push({path:/home})// 带名字推荐this.$router.push({name:Home})六、嵌套路由最重点1. 是什么页面里还有子页面组件里套组件首页子页面 /home/p1子页面 /home/p2子页面 /home/p32. 配置 childrenconstroutes[{path:/container,component:ContainerView,children:[{path:p1,component:P1View},{path:p2,component:P2View},{path:p3,component:P3View}]}]3. 父组件里必须写router-view/router-view子页面会显示在这里。七、Element-Plus 后台布局Container 布局容器最常用el-containerel-aside侧边栏/el-asideel-containerel-header顶部/el-headerel-mainrouter-view/!-- 子页面展示 --/el-main/el-container/el-container八、Vue3 注意点Vue3没有全局 Vue 对象所有东西用createApp()路由用createRouterElement-Plus 用app.use()挂载九、嵌套路由完整步骤创建父布局组件ContainerView.vue创建子页面P1/P2/P3View.vuerouter/index.js 配置children父布局中写router-view侧边栏写router-link跳转十、总结vue-router路径切换组件router-view组件显示位置router-link跳转链接懒加载访问时才加载魔法注释给打包文件起名编程式导航JS 代码跳转嵌套路由 children页面里套页面Element-Plus Container后台布局