Currently I am working on a website using vue 2.6.12. this is the code of my App.vue file:
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>Also this is the code of my nvigCompo.vue code:
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>That is a bit long but the functionality is clear, it must know the route that currently is active and load some data below the nav links according to that. It worked fine, but today I decided to change the "router/index.js" file to lazy-load my routes. here is the code of my index.js file:
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;The problem that occurs here is that every page must be loaded at least one time to show the data that is below the nav links correctly. The rest of the page loads correctly, but the part below the links that contains different data for each route does not work correctly. It does not show me any error or warning, and I want to know why this is happening and how to resolve that?
CodePudding user response：
I think the issue might come from using this function on created():
created() {
window.addEventListener('beforeunload', this.rouFunc() );
},
what you could do is to call this.rouFunc() directly on created(), because the window.addEventListener won't be triggered, as created() is done synchronously after the instance is created (see the lifecycle hooks for Vue2 here).
CodePudding user response：
Instead in created hook you can try to call your function at navigation click:
<i class="far fa-envelope-open-text" @click="rouFunc"></i>