编程式路由导航+缓存路由组件

编程式路由导航

1. 作用：不借助​​<router-link> ​​实现路由跳转，让路由跳转更加灵活
2. 具体编码：

//$router的两个API
this.$router.push({
  name:'xiangqing',
    params:{
      id:xxx,
      title:xxx
    }
})

this.$router.replace({
  name:'xiangqing',
    params:{
      id:xxx,
      title:xxx
    }
})
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //可前进也可后退

缓存路由组件

1. 作用：让不展示的路由组件保持挂载，不被销毁。
2. 具体编码：

<keep-alive include="News"> 
       <router-view></router-view>
   </keep-alive>

多个组件不被销毁：

<keep-alive include="['News','Message']"> 
       <router-view></router-view>
   </keep-alive>

11.两个新的生命周期钩子(路由组件独有)

​​activated,deactivated​​​这两个生命周期函数一定是要在使用了​​keep-alive​​​组件后才会有的，否则则不存在。
使用方法是在路由出口外套上

<keep-alive>
    <router-view></router-view>
</keep-alive>

生命周期钩子(路由组件独有)

activated(){
    // 激活
    console.log('New组件被激活了');
},
deactivated(){
    // 失活
    console.log('New组件失活了');

}

<template>
    <ul>
        <li :style="{opacity}">欢迎学习</li>
        <li>news001<input /></li>
        <li>news002<input /></li>
        <li>news003<input /></li>
    </ul>
</template>

<script>export default {
        name:'News',
        data(){
            return{
                opacity:1
            }
        },
        activated(){
            // 激活
            console.log('New组件被激活了');
            this.timer = setInterval(() => {
                console.log('aaaaa');
                this.opacity -= 0.01;
                if(this.opacity <= 0){
                    this.opacity = 1;
                }
            },16)
        },
        deactivated(){
            // 失活
            console.log('New组件失活了');
            clearInterval(this.timer)

        }
    }</script>

<style>

</style>