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

Posted 勇敢*牛牛

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了编程式路由导航+缓存路由组件相关的知识,希望对你有一定的参考价值。

编程式路由导航

  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>

以上是关于编程式路由导航+缓存路由组件的主要内容,如果未能解决你的问题,请参考以下文章

编程式路由导航

Vue路由 -- 编程式导航

14.前端路由router-04编程式导航

编程式路由导航

vue路由-编程式导航

vue编程式导航,命名路由