## 路由

1. vue-router

- vue2.0 => 3
- vue3.0 => 4
- 安装：npm install vue-router@3 --save
- vuex: npm install vuex --save

2. router.js

- 引入页面路径
- 将路径挂载到路由上

```
  {
      path:"/路径",
      component: 引入页面路径的名称
  }
```

3. App.vue

```
    跳转标签：
    router-link
    属性：
        to:跳转路径地址
        active-class="active" 添加选中样式
    占位标签：
    router-view
```

4. 多级路由

- router.js

  1. 引入路径
  2. 在 children 属性中添加路由
  3. path 路径不要加：/

- router-link
  - to 的路径完整的路径

5. 路由的重定向

```
  {
    path:'/',
    redirect: '/list'
  }
```

6. 路由命名

- router.js

* name:"xxx"

```
     <router-link active-class="active" :to="{name:'xxx'}"></router-link>
```

7. query 传参

```
     <router-link active-class="active" :to="{
        path:'/list',
        query:{
          names: '小郑',
          age: 30
        }
      }" >去列表</router-link>
```
```
    <router-link active-class="active" :to="`/list?names=小郑&age=30`" >去列表</router-link>
  
```
接收query传参
    * this.$route.query

8. params传参
```
    动态绑定时 路由是name名称 不能是path
      <router-link active-class="active" :to="{
        name:'detail',
        params: {
          name1:'Lucy',
          age1: 10
        }
      }">去详情</router-link>
```
```
    router.js页面
     {
        路由中动态绑定参数名
        path:'/detail/:name1/:age1',
        name:"detail",
        component: Detail
     }
     页面
        to属性中直接传参
      <router-link active-class="active" to="/detail/小A/10" >去详情</router-link>
```
接收params参数
    * this.$route.params

9. 编程式导航
作用:更加灵活的跳转路由
this.$router.push("路径")
this.$router.go(数字) 
this.$router.back() 返回
this.$router.forward() 前进

10. 路由懒加载
```()=>import('../components/vase1.vue')
```
* 按需加载 提升性能

11. 组件缓存
keep-alive
1. 什么都不写 全部缓存
2. include 单独缓存 注意：组件一定要起名
3. 多个缓存 :include="['xxx','ccc']"

生命周期
```
  activated() {
    组件被调用时激活
  },
  deactivated() {
    组件被销毁时激活
  },
```