Vue--vuerouter cache routing component

effect ： It can save the original data of components ！！！（ Be careful ： Only when switching under the same parent routing path ）

Use... In its parent component label ,include The value of is the component name ！！！

   <ul>
    <li>
        <router-link active-class="active" to="/home/message">message</router-link>
    </li>
    <li>
        <router-link active-class="active" to='/home/news'>news</router-link>
    </li>
    </ul>
    <!-- include The value of is the component name ！！！ -->
    <keep-alive include="News">
        <router-view></router-view>
    </keep-alive>

Cache multiple component routes

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

Code demonstration ：

<template> <div class="Home"> <h1>Home</h1> <ul> <li> <router-link active-class="active" to="/home/message">message</router-link> </li> <li> <router-link active-class="active" to='/home/news'>news</router-link> </li> </ul> <!-- include The value of is the component name ！！！ --> <keep-alive include="News"> <router-view></router-view> </keep-alive> </div> </template> <script> export default {
    
    name:'Home', data(){
    
        return{
    
        }
    }, methods:{
    
    }
    
}
</script> <style scoped> .Home{
    
        background-color: aqua;
    }
</style>

route index.js

//  This file is used to create routers  import VueRouter from 'vue-router' import About from '../pages/About' import Home from '../pages/Home' import News from '../pages/News' import Message from '../pages/Message' import Detail from '../pages/Detail' //  Create and expose a router  export default new VueRouter({
    
    routes:[
        {
    
            name:'guanyu', path:'/about', component:About, children:[
                {
    
                    //  The secondary routing path cannot be added / path:'message', component:Message, children:[
                        {
    
                            name:'xiangqing', // path:'detail/:id/:title', path:'detail', component:Detail, // props The first way to write , Value as object , //  All... In this object key-value with props In the form of Detail Components  // props:{
    a:1,b:'hello'}
                            // props The second way to write , The value is Boolean , If the Boolean value is true  //  All messages received by the routing component will be sent params Parameters , With props In the form of Detail Components  // props:true // props The third way of writing , The value is a function  props($route){
    
                                return {
    id:$route.query.id,title:$route.query.title}
                            }

                        }
                    ]
                }
            ]
        },
        {
    
            path:'/home', component:Home, children:[
                {
    
                    //  The secondary routing path cannot be added /
                    path:'news',
                    component:News
                },
                {
    
                    //  The secondary routing path cannot be added / path:'message', component:Message, children:[
                        {
    
                            name:'xiangqing', // path:'detail/:id/:title', path:'detail', component:Detail, // props The first way to write , Value as object , //  All... In this object key-value with props In the form of Detail Components  // props:{
    a:1,b:'hello'}
                            // props The second way to write , The value is Boolean , If the Boolean value is true  //  All messages received by the routing component will be sent params Parameters , With props In the form of Detail Components  // props:true // props The third way of writing , The value is a function  props($route){
    
                                return {
    id:$route.query.id,title:$route.query.title}
                            }

                        }
                    ]
                }
            
            ]
        }
    ]
})

result ：