为什么我在使用vue路由器3导航时会看到以前的路由组件

Question

假设我们有3条路线，为了简化起见，它们只被称为1、2和3。

当我导航到路线1->路线2->路线3->路线1、路线2示出了从路线3->路线1。我一辈子都搞不清楚为什么会发生这种事。

路由文件类似于：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Route1 from '../views/Route1';
import Route2 from '../views/Route2';
import Route3 from '../views/Route3';
Vue.use(VueRouter);
const routes = [
{
path: '/route1',
name: 'Route1',
component: Route1
},
{
path: '/route2',
name: 'Route2',
component: Route2
},
{
path: '/route3',
name: 'Route3',
component: Route3
}
];
const router = new VueRouter({
mode: 'history',
base: '/',
query: {
t: window.token
},
routes
});
export default router;

main.js

import 'sass/main.scss';
import moment from 'moment';
import Vue from 'vue';
import { mapActions, mapState } from 'vuex';
import App from './App.vue';
import api from './plugins/api.js';
import vuetify from './plugins/vuetify';
import router from './router';
import store from './store';
Vue.prototype.$moment = moment;
Vue.use(api);
Vue.config.productionTip = false;
new Vue({
computed: {
...mapState
},
methods: {
...mapActions
},
router,
store,
vuetify,
watch: {
$route() {
try {
// ... some action(s) on route change - removed here
} catch (error) {
// ... error handling removed
}
}
},
render: h => h(App)
}).$mount('#app');

App.vue

<template>
<v-app>
<!-- header/app bar removed here -->
<v-main>
<v-progress-linear
v-if="loading"
color="primary lighten-2"
height="2"
indeterminate
/>
<router-view v-else />
</v-main>
<!-- footer removed here -->
</v-app>
</template>

Answer 1

有点笨，但我还是会把它放在那里。我的组件正在渲染商店中的动态组件。。。在导航到新路由时，我只需要清除存储的组件数组，而新的组件数组是从API获取的。因此，当回到另一条路线时，它第一次看到的是旧的动态组件阵列的闪光。