Question

我最近开始使用vue，我已经设法创建了一些简单的页面，但是我注意到加载后的组件没有被缓存，因此例如在下面的链接上（这是我正在处理的）youtube视频需要一段时间才能加载，如果我点击任何其他链接并返回视频，则会再次加载。

是否可以使用缓存组件？最好是全部而不是1比1。

这是我的观点：

import VueRouter from 'vue-router';
import Create from '../components/homepage/create.vue';
import How from '../components/homepage/how.vue';
import About from '../components/homepage/about.vue';
import Youtube from '../components/homepage/youtube.vue';
import Navigation from '../components/homeNavigation.vue';
import Login from '../components/auth/login.vue';
import Register from '../components/auth/register.vue';


const routes = [
    { path: '/create', component: Create },
    { path: '/how', component: How },
    { path: '/about', component: About},
    { name: 'youtube', path: '/youtube', component: Youtube},
    { path: '/login', component: Login},
    { path: '/register', component: Register},
];

Vue.use(VueRouter);
Vue.component('navigation', Navigation);

const router = new VueRouter({
    routes,
});

new Vue({
    el: '#app',
    router,
    updated: function () {
        Pace.restart()
    },
    mounted: function() {
        Pace.restart()
    }
});

查看：

<div id="app">
        <navigation></navigation>
            <transition appear name="slide-fade" mode="in-out">
                <keep-alive include='youtube'>
                    <router-view></router-view>
                </keep-alive>
            </transition>
</div>

我的应用：

http://b2750916.ngrok.io/#/youtube

Answer 1

在此处查看此答案： https://forum.vuejs.org/t/keep-alive-specific-component/2372/2

从v2.1开始你可以使用＆＃34; include＆＃34;和＆＃34;排除＆＃34;属性作为正则表达式，用于控制将缓存哪个组件。这些属性也可以是v-bind＆ed; https://vuejs.org/v2/api/#keep-alive

另一种方法是在您不想缓存的组件上使用deactivated挂钩。在钩子中，您调用this.$destroy();，在未使用的情况下删除缓存中的组件。

另外，也许这可以帮到你？ https://github.com/LinusBorg/portal-vue

不确定portal-vue是否可行，但我的想法是将视频放在外面以便独立呈现（在＃34;门户网站中放置在根组件中）并使其显示在您想要使用的位置a＆＃34;门户网站目标＆＃34;。

Vue路由器使用keep-alive来缓存某些组件？

1 个答案: