Vue.js中的路由进阶(激活、缓存、动画、数据预载、懒加载)

路由激活

路由激活使用方法:

• A: 自己书写一个类名或是使用第三方给的class类名

• B: 在router-link组件身上添加一个 active-class 的属性

<router-link active-class="active" class="nav-link" to = "/home"> 首页 </router-link>
<router-link active-class="active" class="nav-link" to = "/category"> 分类 </router-link>
<router-link active-class="active" class="nav-link" to = "/login"> 登录 </router-link>
<router-link active-class="active" class="nav-link" to = "/reg"> 注册 </router-link>
<router-link active-class="active" class="nav-link" to = "/user"> 用户 </router-link>

<style lang="stylus">
  .active
    background red
    color #ffffff
</style>

路由激活的思想:会匹配路由,如果路由和当前地址匹配那么就会激活

路由的缓存(keep-alive)

作用:将整个路由页面缓存下来

路由缓存使用方法:

• 在router-link组件上添加一个属性 keep-alive

<router-link to = "/home" keep-alive></router-link>
<router-link to = "/user" keep-alive></router-link>

可以看见并没有再次加载,没有发送请求,而是缓存在了浏览器中

路由的动画(transition)

一共有四个方案,和前面介绍的四种是一致的

(animate.css)使用方法:

• A：先安装 animate.css 可以模块化引入 yarn add animate.css
• B: 在main.js中引入 import 'animate.css'
• C：将router-view 组件用transition组件包裹
• D: 在transition组件身上添加 enter-active-class 和 leave-active-class

<transition
enter-active-class="animated slideInLeft"
leave-active-class="animated slideOutLeft"
mode="out-in"<!--先出后进-->
name="router">
  <router-view></router-view>
</transition>

mode:动画方式

name:起个名字

这串代码的动画效果就是这样了

路由的数据预载

思想:导航完成前获取数据,也就是在点击路由前就拿到数据

核心:

 1. next( vm => { Vue.set(vm.dataAttr,key,value) })
 2. next( vm => { vm.setDate(vm.dataAttr,value )})

第一种的实例:

next(vm => { //vm指的就是组件
          const result = JSON.parse(res.data.slice(7,-1)).rp_result.categorys
          vm.$set(vm.category,'categorys',result)
        })

        //data中数据要这样定义

        data () {
          return {
            data: {
              category: null
            }
          }
}

第二种的实例:

next(vm => vm.setData(vm.dataAttr, value))
 data () {
    return {
      category: null
   }
}

路由的懒加载

1. 概念： 指的是，对应的路由加载对应的路由组件---按需加载路由
2. Vue异步组件
3. webpack的代码分割

在index.js中添加以下代码:(定义一个加载函数)

const routerLayLoad = (view) => {
    return () => import(/* webpackChunkName: "view-[request]" */ `../components/pages/${view}.vue`)
}

1. import里的注释是必不可少的,这是注释语法

改造路由表:(路由表的路由用上面定义的函数包裹)

//创建路由表
const routes = [
    {
        path : '/',
        component : routerLayLoad('Home')
    },
    {
      path : '/home',
      component : routerLayLoad('Home')
    },
    {
        path : '/category',
        component : routerLayLoad('Category')
    },
    {
        path : '/list/:id',
        component : routerLayLoad('List'),
        name : 'list'
    },
    {
        path : '/reg',
        component : routerLayLoad('Reg')
    },
    {
        path : '/login',
        component : routerLayLoad('Login') 
    },
    {
        path : '/user',
        component : routerLayLoad('User'),
        //独享路由守卫
        beforeEnter: (to,from,next) => {
            const name = localStorage.getItem('name')
            if( name || to.path === 'user'){
               next()
            }else{
               setTimeout( ()=> {
                 alert('您还没有登录账号，3秒后自动跳转到登录页')
                 next('/login')
               },3000)
            }
           }
    },
    {
        path : '**',
        component : Error
    }
]

这样就实现了路由懒加载