为什么我的路由不能正常工作后改变为延迟加载路由在vue-js?

Question

目前我正在使用vue 2.6.12的网站上工作。这是我的App.vue文件的代码:

App.vue

<template>
<div id="app">
<div class="bg-head">
<nvigCompo></nvigCompo>
</div>
<!-- main content of the pages -->
<router-view/>
<footerCompo></footerCompo>
</div>
</template>
<script>
import footerCompo from "./components/footerCompo";
import nvigCompo from "./components/nvigCompo";
export default {
components: {
nvigCompo,
footerCompo
},

};
</script>
<style src="../public/css/style.css"></style>

这也是我的nvigCompo.vue代码:

nvigCompo.vue

<template>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<nav id="nav" class="navbar navbar-expand-sm">
<button @click="menuLogo" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav1" aria-controls="nav1" aria-expanded="false" aria-label="Toggle navigation">
<i class="far fa-bars icon-style"></i>
</button>
<div class="collapse navbar-collapse" id="nav1">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<!-- @click="rouFunc" -->
<li @click="rouFunc" class="nav-item mx-lg-4 mx-sm-2 mx-1">
<router-link :class="[navBoot, aStyle]" :to="{name: 'Articles'}">مقالات
<i class="far fa-file-signature"></i>
</router-link>
</li>
<li @click="rouFunc" class="nav-item mx-lg-4 mx-sm-2 mx-1">
<router-link :class="[navBoot, aStyle]" :to="{name: 'About'}">درباره من
<i class="far fa-id-card-alt"></i>
</router-link>
</li>
<li @click="rouFunc" class="nav-item mx-lg-4 mx-sm-2 mx-1">
<router-link :class="[navBoot, aStyle]" :to="{name: 'Samples'}">نمونه کارها
<i class="far fa-code"></i>
</router-link>
</li>
<li @click="rouFunc" class="nav-item mx-lg-4 mx-sm-2 mx-1">
<router-link :class="[navBoot, aStyle]" :to="{name: 'Contact'}">تماس با من
<i class="far fa-envelope-open-text"></i>
</router-link>
</li>
</ul>
</div>
<router-link :class="[navBootBrand]" :to="{name: 'Articles'}">
<img class="img-fluid logo" src="../assets/img/logo.png" alt="لوگوی سایت حمید داودی">
</router-link>
</nav>
</div>
</div>
<!-- below the navigation link -->
<div class="row">
<div class="col-md-5">
<div class="head-img d-flex flex-column">
<img v-bind:src = this.message.src1 :alt = this.message.alt1 class="img-fluid">
<h1 class="pb-2">
{{ this.message.messH1 }}
</h1>
<p>
{{ this.message.messP1 }}
</p>
</div>

</div>
<div class="col-md-7">
<div class="parent-left">
<h2 class="pb-3">
{{ this.message.messH2 }}
</h2>
<div>
<img v-bind:src = this.message.src2 :alt = this.message.alt2>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "nvigCompo",
data() {
return {
navBoot: "nav-link",
aStyle: "astyles",
navBootBrand: "navbar-brand",
message: {
messH1: 'مقالات در زمینه وب',
messP1: 'آموزش و تمرین مهارتها',
messH2: 'شاخه های کلی مقالات',
src1: require('../assets/img/nav-imgs/article-img.png'),
src2: require('../assets/img/nav-imgs/article-left.png'),
alt1: 'تصویر نمایشی مقالات',
alt2: 'تصویر شاخه های کلی مقالات'
}
}
},
methods: {
menuLogo: function () {
/* this function is used to position the logo when clicking the "menu icon" below 575px */
$('.logo').addClass('logo755');
},
rouFunc: function () {
/* this function changes text and images according to "route name" */
switch (this.$route.name) {
case "Articles":
this.message.messH1 = 'مقالات در زمینه وب';
this.message.messP1 = 'آموزش و تمرین مهارتها';
this.message.messH2 = 'شاخه های کلی مقالات';
this.message.src1 = require('../assets/img/nav-imgs/article-img.png');
this.message.src2 = require('../assets/img/nav-imgs/article-left.png');
this.message.alt1 = 'تصویر نمایشی مقالات';
this.message.alt2 = 'تصویر شاخه های کلی مقالات';
break;
case "About":
this.message.messH1 = 'حمید داودی';
this.message.messP1 = 'طراح و توسعه دهنده وب سایت';
this.message.messH2 = 'مهارتهای مهم و تخصصی';
this.message.src1 = require('../assets/img/nav-imgs/about-img.png');
this.message.src2 = require('../assets/img/nav-imgs/about-left.png');
this.message.alt1 = 'تصویر حمید داودی';
this.message.alt2 = 'تصویر مهارتهای تخصصی';
break;
case "Samples":
this.message.messH1 = 'پروژه های انجام شده';
this.message.messP1 = 'نشان دهنده کیفیت مهارتها';
this.message.messH2 = 'موضوعات کلی نمونه کارها ';
this.message.src1 = require('../assets/img/nav-imgs/sample-img.png');
this.message.src2 = require('../assets/img/nav-imgs/sample-left.png');
this.message.alt1 = 'تصویر نمایشی برای نمونه کارها';
this.message.alt2 = 'تصویر عنوان برخی پروژه های انجام شده';
break;
case "Contact":
this.message.messH1 = 'ارتباط با طراح سایت';
this.message.messP1 = 'ارسال نظرات و درخواست ها';
this.message.messH2 = 'راه های مهم ارتباطی';
this.message.src1 = require('../assets/img/nav-imgs/contact-img.png');
this.message.src2 = require('../assets/img/nav-imgs/contact-left.png');
this.message.alt1 = 'تصویر نمایشی ارتباط با طراح سایت';
this.message.alt2 = 'تصویر راه های مهم ارتباطی';
break;
} // end of switch
},

}, // end of methods
created() {
window.addEventListener('beforeunload', this.rouFunc() );
},

}
</script>
<style scoped src="../assets/assets-CSS/navig.css"></style>

这是一个有点长，但功能是明确的，它必须知道the route，目前是活跃的，并加载一些数据下面的导航链接根据这个。它工作得很好，但今天我决定更改"router/index.js"文件来惰性加载我的路由。这是我的index.js文件的代码:

index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import articles from '../views/Articles';
// import articlesId from '../views/ArticlesId';
// import about from '../views/About';
// import contact from '../views/Contact';
// import samples from '../views/Samples';
Vue.use(VueRouter);
/* main routes of the site  */
const routes = [
{
path: '/',
name: 'Articles',
component: articles,
props: true
},
{
path: '/articles/:id',
name: 'ArticlesId',
component: () => import(/* webpackChunkName: "articlesId" */'../views/ArticlesId'),
// component: articlesId,
props: true
},
{
path: '/about',
name: 'About',
component: () => import(/* webpackChunkName: "about" */'../views/About'),
//component: about,
props: true
},
{
path: '/samples',
name: 'Samples',
component: () => import(/* webpackChunkName: "samples" */'../views/Samples'),
//component: samples,
props: true
},
{
path: '/contact',
name: 'Contact',
component: () => import(/* webpackChunkName: "contact" */'../views/Contact'),
//component: contact,
props: true
}
];
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes,
});
export default router;

这里出现的问题是每个页面必须至少加载一次才能显示导航链接下面的数据正确。页面的其余部分可以正确加载，但是链接下面包含每个路由不同数据的部分不能正常工作。它没有显示我任何错误或警告，我想知道为什么会发生这种情况，以及如何解决?

Answer 1

我认为这个问题可能来自于在created()上使用这个函数:

created() {
window.addEventListener('beforeunload', this.rouFunc() );
},

你可以做的是直接在created()上调用this.rouFunc()，因为window.addEventListener不会被触发，因为created()是在实例创建后同步完成的(参见这里的ve2的生命周期钩子)。