$route 里的meta属性

     路由属性meta可以通过路由文件设置当下路由特殊需要使用的数据方法.

       这是设置路由的文件

{path: '/home',
    name: 'home',
        component: HomeView,
            children: [{
                path: '/home/category',
                component: () => import('../views/home/Category.vue'),
                meta: {
                    keepAlive: false,
                    title: '类型'
            		}
                       },
               {
                path: '/home/abab',
                component: () => import('../views/home/abab.vue'),
                meta: {
                    keepAlive: true,
                    title: '购物车'
            		}
                       }
                      ]
}

meta的值只随实际页面的路由而变化

它可通过调用$route.meta来获取路由文件所设置的数据

keep-alive

使用场景:

首先,当我们切换了页面时,页面会重新渲染,而我们刚才浏览过的一些类似很长的一段视频,看一半,不小心点到其他页面上,然后你点回来你的数据重新渲染了,又要从头开始看,非常不爽,

然后就可以用到我们的keep-alive 就可以避免页面反复渲染的问题

 <keep-alive>
     <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>