1.路由

 路由是什么呢?
          路由是一种映射关系
 Vue中的路由是什么?
          路径和组件的映射关系
 优点：
     整体不刷新页面，用户体验更好
     数据传递容易, 开发效率高
 缺点：
     开发成本高(需要学习专门知识)
     首次加载会比较慢一点。不利于seo      
 1. 什么是单页面应用?
           所有的业务都在一个页面编写, 只有一个html
 2. 单页面应用好处?
           开发效率高, 用户体验好
 3. 单页面如何切换场景?
           依赖路由切换显示         

2.Vue路由-vue-router使用

安装 router 的依赖包:
            npm i vue-router@3.5.1
            yarn add vue-router@3.5.1
            

3.vue-router基本配置

4.路由基本体验

5.Vue路由-声明式导航-跳转router-link

1. router-link是什么?
   VueRouter在全局注册的组件, 本质就是a标签
2. router-link怎么用?
   当标签使用, 必须传入to属性, 指定路由路径值
3. router-link好处?
   自带激活时的类名, 可以做高亮

目标：可用组件router-link来替代a标签

  1. vue-router提供了一个全局组件 router-link
  2. router-link实质上最终会渲染成a链接 to属性等价于提供 href属性(to无需#)
  3. router-link提供了声明式导航高亮的功能(自带类名)   
  

案例效果:

6.Vue路由-声明式导航-传参

目标：在跳转路由时, 可以给路由对应的组件内传值

 在router-link上的to属性传值, 语法格式如下
 /路径?参数名=值               查询字符串
/路径/值 – 需要路由规则数组对象提前配置 path: “/路径/:参数名”                 动态参数
对应页面组件接收传递过来的值
$route.query.参数名
$route.params.参数名

查询字符串如何接收传递过来的值?

1.在router-link上的to后面添加     /路径?参数名=值 
例如:<router-link to="/find?name=周杰伦">发现音乐</router-link>
2.在对应的find文件夹里面添加      $route.query.参数名
 例如: <p>{{ $route.query.name }}</p>
 

动态参数如何接收传递过来的值?

1.在router-link上的to后面添加 /路径/值
例如:<router-link to="/my/pink">我的音乐</router-link>
2.在数组对象提前配置 path: “/路径/:参数名”
  例如: {
         path: '/my/:uname',
         component: My
       },
3.在对应的My.vue文件夹里面添加       $route.params.参数名
 例如: <p>{{ $route.params.uname }}</p>
 

7.动态查询参数如何传参?

8.Vue路由-重定向

 1. 如何监测默认路由?
        规则里定义path: '/'
 2. 如何重定向路由路径?
     redirect配置项, 值为要强制切换的路由路径
     

9.Vue路由-404页面

当找不到路径给个提示页面
如何给路由体系里设置404页面?
在数组最后一个位置, 插入匹配*的规则, 展示404页面

10.Vue路由-模式设置

路由的两种模式: hash和history

修改路由在地址栏的模式

hash路由例如: http://localhost:8080/#/home
history路由例如: http://localhost:8080/home

11.Vue路由-编程式导航-跳转

12.Vue路由-编程式导航-跳转并传递参数

13.Vue路由-编程式导航通过name进行跳转

14.Vue路由-编程式导航通过name进行跳转并传递参数

15.$route与$router的区别:

 $route 表示当前激活的路由的信息对象每个对象都是局部的，
 可以获取当前路由的 path, name, params, query 等属性。$route 用于 获取路由信息

 $router 全局的 router 实例。通过 Vue 根实例中注入 router 实例，
 然后再注入到每个子组件，从而让整个应用都有路由功能。
 其中包含了很多属性和对象（比如 history 对象），
 任何页面也都可以调用其 push(),replace(), go() 等方法。$router 用于 操作路由

16.Vue路由-声明式导航-类名区别 :

观察路由嵌套导航的样式
    router-link-exact-active (精确匹配) url中hash值路径, 与href属性值完全相同, 设置此类名
    router-link-active (模糊匹配) url中hash值, 包含href属性值这个路径

17.Vue路由-全局前置守卫

   什么是路由守卫?
           路由在真正跳转前, 会执行一次beforeEach函数, next调用则跳转, 也可以强制修改要跳转的路由              
   语法:  router.beforeEach((to, from, next) =>｛｝)
         to 要跳转到哪里去
         from 来自哪里
         一定调next(), 才会跳转下一页
         next(false) 阻止跳转 停留在原地
         next(‘目标地址’) 强制跳转到目标位置
      

18.Vue路由-组件缓存-匹配缓存

  语法:
       keep-alive组件的include属性和exclude属性
       先给对应组件设置name属性名
       再把名字填写到include/exclude位置
  Include (包含 – 缓存)
  exclude(不包含 – 不缓存)
  

19.Vue路由-组件缓存-设置条件

目标：扩展2个新的生命周期方法
 方法名:
        activated – 激活时触发
        deactivated – 失去激活状态触发