VIP32/vue2.0/vue高阶/4.归纳.md

路由

1. vue-router

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

1. router.js

• 引入页面路径

• 将路径挂载到路由上

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

1. App.vue

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

2. 多级路由

• router.js

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

• router-link

  • to 的路径完整的路径

1. 路由的重定向

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

2. 路由命名

• router.js

• name:"xxx"

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

1. 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

1. 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

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

3. 路由懒加载

4. 按需加载 提升性能

5. 组件缓存 keep-alive

6. 什么都不写 全部缓存

7. include 单独缓存 注意：组件一定要起名

8. 多个缓存 :include="['xxx','ccc']"

生命周期

  activated() {
    组件被调用时激活
  },
  deactivated() {
    组件被销毁时激活
  },