## VUE-ROUTER

vue2.0 => 3
vue3.0 => 4

安装命令：
npm install vue-router@3

yarn add vue-router@4

1.创建路由文件
2.在main.js页面进行引入并挂载
3.创建页面 详情见 router=>index.js
4.占位符:router-view 在哪里显示在哪里添加占位符 切记：占位符无需多个 按需显示即可
5.router-link 跳转标签
    to:放置跳转到path
    active-class:添加高亮
6.路由页面：
    {
        path:"/路径",
        name:'当前页面名字',
        如果使用name属性  router-link上to必须进行动态绑定 =>App.js
        component:"当前路径的页面名字"
    }
7.路由重定向
redirect:'默认页面路径'
8.多级路由
配置在对应的路由对象下
path路径没有:/
9.传参：
query:

      <router-link active-class="active1" :to="`/list?names=小郑&age=2`">列表</router-link>

      <router-link active-class="active1" :to="{
        path:'/list',
        query:{
          names:'小孩',
          age:20
        }
      }">列表</router-link>
    接收：
        js=>this.$route.query.xxx
        template=>$route.query.xxx

params:
    在router页面
    
    {
        path: "/my/:id/:name",
        component: My,
    },
    在router-link上
     <router-link active-class="active1" :to="`/my/123/哈哈哈`">我的</router-link>
     +++++++++++
     在路由上添加name属性
     在页面上
    <router-link active-class="active1" :to="{
        name:'wode',
        params:{
          id:222,
          name2:'哈哈哈哈'
        }
      }">我的</router-link>
    接收：
        js=>this.$route.params.xxx
        template=>$route.params.xxx
   name只能用于params传参 不能用于query传参 
   params对象传参 不会暴露所传信息

10.声明式导航：
    router-link 
   编程式导航:
   this.$router.push('具体跳转页面')
   this.$router.back() 返回上一页
   this.$router.forward() 前进
   this.$router.go(n) 自定义

11.replace和push
添加在声明式导航上的
replace 无浏览历史记录
push 存在浏览历史记录

12.路由懒加载
按需加载 节约性能
在router页中component上
（）=> import("路径")

13.组件缓存
keep-alive:讲需要保存的部分放到标签内
按需保存案例：
  <keep-alive :include="['demo1','demo3']">
    <router-view></router-view>
  </keep-alive>

activated:组件调用时候激活
deactivated：组件销毁时侯激活

14.路由的模式
hash: 
  #
  快
  安全
  即地址栏URL中的#符号，它的特点在于：hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，不需要后台进行配置，因此改变hash不会重新加载页面。
history：
  美观，干净
  慢
  history模式改变了路由地址，因为需要后台配置地址。

15.路由守卫
a.全局守卫：
    全局前置路由守卫：router.beforeEach
    全局后置路由守卫：router.afterEach
b.独享守卫
  路由独享守卫：beforeEnter
c.组件守卫:
beforeRouteEnter:组件进入
beforeRouteLeave：组件离开