vue--vuerouter缓存路由组件

作用：能保存组件原来的数据！！！（注意：时同一个父路由路径下切换才行）

在其父组件中使用 标签，include的值为组件名！！！

   <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的值为组件名！！！ -->
    <keep-alive include="News">
        <router-view></router-view>
    </keep-alive>

缓存多个组件路由

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

代码演示：

<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的值为组件名！！！ --> <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>

路由index.js

// 该文件用于专门创建路由器 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' // 创建并暴露一个路由器 export default new VueRouter({
    
    routes:[
        {
    
            name:'guanyu', path:'/about', component:About, children:[
                {
    
                    // 二级路由路径不能加/ path:'message', component:Message, children:[
                        {
    
                            name:'xiangqing', // path:'detail/:id/:title', path:'detail', component:Detail, // props的第一种写法，值为对象， // 该对象中的所有key-value都会以props的形式传给Detail组件 // props:{
    a:1,b:'hello'}
                            // props的第二种写法，值为布尔值,若该布尔值为真 // 就会把该路由组件收到的所有params参数，以props的形式传给Detail组件 // props:true // props的第三种写法，值为函数 props($route){
    
                                return {
    id:$route.query.id,title:$route.query.title}
                            }

                        }
                    ]
                }
            ]
        },
        {
    
            path:'/home', component:Home, children:[
                {
    
                    // 二级路由路径不能加/
                    path:'news',
                    component:News
                },
                {
    
                    // 二级路由路径不能加/ path:'message', component:Message, children:[
                        {
    
                            name:'xiangqing', // path:'detail/:id/:title', path:'detail', component:Detail, // props的第一种写法，值为对象， // 该对象中的所有key-value都会以props的形式传给Detail组件 // props:{
    a:1,b:'hello'}
                            // props的第二种写法，值为布尔值,若该布尔值为真 // 就会把该路由组件收到的所有params参数，以props的形式传给Detail组件 // props:true // props的第三种写法，值为函数 props($route){
    
                                return {
    id:$route.query.id,title:$route.query.title}
                            }

                        }
                    ]
                }
            
            ]
        }
    ]
})

结果：