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

Posted 2022-07-12 勇敢*牛牛

编程式路由导航

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>