Vue Router | 青训营

一、简介

1. 是什么：构建SPA的路由管理器
2. 为什么要用：
   • 能实现页面无刷新切换和导航，提升用户体验
3. 底层原理：
   • 利用History API或haschange事件这样的浏览器API来管理应用当前应该渲染的视图

二、使用vue router(vue router4)

1. 安装：npm install **vue-router@4
2. 创建路由实例（main.js里）：使用createRouter()
   • createRouter()
     • history：createWebHistory()
     • routes：路由配置对象{};
       • 所含选项
         • path：跳转路径
         • component/components：{组件名}
         • props：设置为true时，route.params将被设置为组件的props
         • redirect：路由重定向
   • 注：createRouter,createWebHistory都是引自'vue-router'，不是引自'vue'
3. 将路由实例注册到应用里：应用实例名.use(路由实例名)（main.js里）
4. 注册路由组件
   • 注册位置（如果全部写在main.js，main.js会很庞大）
     • route.js
   • 注册方法
     • components:{组件名: defineAsyncComponent(() => import('组件路径'))}
       • 这种注册方式可以减少初次加载应用的时间，组件只有在访问到它时才会加载（按需加载）
5. 使用路由组件
   • router-link标签：
     • 属性
       • to属性：代表要渲染哪个组件的内容
       • replace属性：取代当前条目，不会向history栈添加内容
     • 特点
       • 经解析后变成a标签（所以能实现跳转渲染的效果，但不用重新加载整个页面）
       • 被点击后，相当于调用router.push(...)（身上为to属性而不是replace属性时）
   • router-view标签：渲染跳转路径对应的组件内容
6. 嵌套路由
   • 本质：组件内部嵌套另一个组件
   • 实现： -每个路由配置对象添加children属性，代表当前组件里作为路由组件的子组件（按路由组件配置）
7. 同时展示多个视图
   • 实现方式：使用命名视图
   • 实现步骤： - router-view上添加name属性，值作为渲染视图的命名 - 路由配置对象里component换成components，添加想展现的多个视图组件
8. 导航守卫
   • 是什么
     • 一组控制路由行为的函数
   • 执行时间
     • 路由切换或导航过程中
   • 类型
     • 全局守卫
       • beforeEach：每次路由切换前执行
       • afterEach：每次路由切换后执行
     • 路由独享守卫
       • beforeEnter：在进入某个特定路由前执行

三、历史记录模式

1. hash模式（使用createWebHashHistory）
   • 通过URL的哈希部分（即#后面的内容）来管理路由
     • 注：哈希部分不会发送给服务器，该模式的兼容性较好
2. history模式（使用createWebHistory）
   • 通过HTML5提供的浏览器历史记录API来管理URL路由
     • 注：此时URL里不含'#'，更简洁美观，但需要服务器支持