相关疑难解决方法(0)

我创建了一个由两个主要组件组成的小应用程序，我使用 vue 路由器在组件之间进行路由。

第一个组件称为 MoviesList，第二个组件称为 Movie。我已将它们注册到routes js 文件中。

const routes = [
  {
    path: '/',
    name: 'Home',
    component: MoviesList
  },

  {
    path: '/:movieId',
    name: 'Movie',
    component: Movie
  }
  
]

我的 App.vue 模板如下所示

<template>
   <router-view></router-view>
</template>

如何使 MovieList 组件缓存起来，或者说它是用<keep-alive>标签包裹的？期望的结果是缓存 MovieList 组件，而不缓存 Movie 组件。

我想这样做，因为 MovieList 组件有一个在 Mounted() 钩子上运行的方法，每当我切换路由并返回时，该方法都会再次运行，因为组件被重新渲染。

我最近开始使用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 = …