路由模式及动态路由

复习函数式组件–模态组件

步骤
1、定义项目的入口以及实现全局组件和指令挂载 – main.js
2、实现挂载和定义 – createApp、use、mount
3、定义一个vue入口组件 – App.vue
4、实现全局插件，用于组件注册和指令注册 – globalPlugin.js
5、函数插件，接收一个VueConstructor，使用它的component方法和directive（自定义指令）方法来实现注册
6、封装模态组件：全局视图盒子–fixed、内容具中–margin
6.1 接收数据 – props – defineProps – show、title
6.2自定义模态体内容 – html片段传递 – 插槽 – 那么default slot
6.3模态底部按钮 – footer slot 或则默认确认和取消按钮
7、实现modal组件测试页面，需要集成到App.vue中去
8、要控制modal组件是否显示，需要有一个按钮去设置show值为真，那么ModalTest组件中定义一个变量 – ref、reactive
9、modal组件可以关闭组件本身，但是props值是readonly，所以需要定义一个emit方法 – defineEmits
10、实现less样式加载 cnpm i -D less
11、实现模态页面编写 – Modal.vue
12、实现全局插件编写 – globalPlugin.js 实现模态组件全局注册
13、实现调用组件页面编写 – App.vue
函数式参数传递
defineProps定义props接收
defineEmits定义自定义事件触发
useSlots获取插槽节点

理解SPA单页面应用程序

• SPA——single page application 单页面应用，整个应用只有一个html页面
• 弊端：
  • 多个页面组件进行切换，无法管理
  • 页面与页面之间存在传值，管理不方便
  • 页面跳转后的历史记录，无法保证–H5 history对象 location来实现地址切换（特征：多页面跳转，无法进行页面内部元素切换）
• 综上所诉
  • 需要有一个可以支持history对象，并且集成了页面数据传递，渲染等功能的一个库：vue-router

路由的安装

• 安装：cnpm i -S vue-router
• 集成，在项目中引入vue-router这个库 – main.js中引入 – 路由一定是全局的
• 页面要能够进行组件渲染，也要进行页面跳转，所以需要实例化 – createRouter方法
• 路由有多种模式，需要指定一个模式 – hash模式、history模式
• 指定url地址和某个组件之间的关系
• 需要有一个地方来执行路由对应的组件渲染 --当前应用只有App.vue组件被渲染出来了，所以这个渲染组件应该放在App.vue文件中—router-view
• router-view是vue-router这个库的组件，所以需要注册到全局才行，并且路由库中有很多方法需要注册到全局，所以得到的router实例应该为一个插件 – use来进行注册

两种路由模式

• vue-router实现的核心是：采用history对象和location的原理来实现的，也就是跳转路由后的信息是写入到history对象
• hash模式及原理 —hashchange事件监听路由变化，然后把路由对应的组件渲染到router-view占位组件的地方，带‘#’
• history模式及原理 ----ServiceWorker切面拦截线程（拦截当前浏览器发送的所有请求）会进行get请求拦截，如果是前端路由，会执行路由组件渲染，不会发出get请求

路由规则的定义 – 定义登陆页面和首页路由

• 路由定义
• 关联组件
• 路由重定向

两个内置组件

• 路由视图组件router-view
• 路由跳转链接组件router-link

实现路由的规则

• 业务抽离，所以路由定义需要拆包 – router.js 必须导出一个默认的router对象
• 引入定义路由的相关方法:
  1.创建路由实例的方法：createRouter
  2.创建对应路由模式的方法：createWeb(Hash)History
• 配置路由相关的信息
  1.定义路由：path 设置当前路由的路径
  2. 定义路由对应的组件：component 指定vue组件
  3. 默认路由重定向：redirect 属性
• 系统默认的路由是什么？——默认地址是：/
• 实现默认地址重定向，因为系统都会有一个默认的地址
  1.定义路由定义的是：location.pathname这个数据，必须以 /开头
• 指定路由对应的组件的渲染位置
  1.当前页面只有App.vue组件被渲染，所以指定路由组件渲染位置的占位组件只能在App.vue中编写
  2.router-view 路由视图占位符组件，来实现路由组件渲染位置指定
• 定义子路由 – children
  1. 在对应的父路由中使用children属性定义
• 有一个列表页面，需要跳转到一个编辑页面，那么需要把编辑的数据带到编辑页面去

1. 涉及到页面之间的传参,可以使用路由传参

• 通过this可以获取实例对象$router——执行页面跳转等业务
• 通过this获取当前路由数据$route
• 路由通过query可以进行路由传参 Home1 到 Hpme2

动态路由

• 路由地址的不固定
• 定义路由：
  • 在路由字符串中使用 :+key的形式来声明这个字段为动态字段
    
• 使用动态路由：
  • 需要把 ：key替换为你需要传递的参数

• 接收数据：
  • 在$route中使用params对象来接收，:key 中key属性就是传递的参数

8. 路由的作用
   • 现代的开发模式基本上是SPA（单页应用—一个应用只有一个页面）开发模式
   • 路由实际就是指页面的url地址
     • 单页应用希望通过url地址的变化来实现页面的切换功能
       • 页面跳转后的记录如何保存——当前页面跳转后记录是由html5的history对象保存
       • 页面组件和url地址如何产生关系
       • 页面如何进行跳转，非多页应用（MPA——多个HTML页面，通过href来执行跳转）
9. 路由实现的方法有那些
   • 单独引入第三方库：vue-router
   • 底层原理：
     • hash模式：通过监听hashchange来实现的一个路由组件切换的模式 -——window.addEventListener()

总结

• 实例化
  • createRouter ( { history:指定路由模式，routes：配置路由规则 } )
• 配置
  • routes
    • path：定义路由名字，component：指定路由组件，meta：定义路由的固定参数，name：定义别名——相当于path，redirect：重点定向path
    • path
      • 固定路由—>/login
      • 动态路由—>/home/：id—>：id是动态字段，在使用的时候，一定要替换为你需要传递的参数
• 全局组件
  • 路由组件容器：router-view
  • 路由跳转组件：router-link
• 全局拦截
  • beforeEach 它是实现全局拦截的主要钩子函数
    • 三个参数：to,from,next
    • 业务：在页面跳转的时候，需要用户一定登录后，才行，所有读取了sessionStorage中token数据