目前我正在一个使用 vue 2.6.12 的网站上工作。这是我的App.vue文件的代码：
应用程序.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;这里出现的问题是每个页面都必须至少加载一次才能正确显示导航链接下方的数据。页面的其余部分正确加载，但链接下方包含每条路线的不同数据的部分无法正常工作。它没有向我显示任何错误或警告，我想知道为什么会发生这种情况以及如何解决？