Vue2项目切换为路由懒加载后导航栏对应路由内容无法正常显示如何解决

问题触发原因 #

路由懒加载本质是异步加载组件资源，点击导航链接时，浏览器会先下载对应路由的组件代码，加载完成后才会真正更新路由实例。你原来将更新导航展示数据的rouFunc方法绑定在导航项的点击事件上，点击事件触发时异步组件还未加载完成，this.$route.name仍是上一个路由的名称，所以首次点击时匹配不到当前路由的对应数据，不会更新导航内容。等组件加载完成路由更新后，第二次点击时this.$route.name已经是当前路由的正确值，所以就能正常显示。
另外你组件created生命周期中写的beforeunload监听逻辑完全无效，你直接执行了this.rouFunc()，仅会在组件初始化时运行一次，后续路由变化不会触发，也解决不了首次路由匹配的问题。

解决方案 #

不用点击事件触发数据更新，改成监听路由变化自动触发更新即可：

1. 删除所有li标签上的@click="rouFunc"绑定
2. 删除created生命周期中的beforeunload监听代码
3. 在nvigCompo组件中添加$route的监听器，配置immediate属性让组件初始化时就执行一次匹配路由的逻辑

修改后的组件核心代码参考：

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: 'تصویر شاخه های کلی مقالات'
            }
        }
    },
    watch: {
        // 监听路由变化，路由更新完成后自动执行数据更新
        '$route': {
            immediate: true, // 组件初始化立即执行一次，匹配首次打开的路由
            handler() {
                this.rouFunc()
            }
        }
    },
    methods: {
        menuLogo: function () {
            /* 原有逻辑保持不变 */
            $('.logo').addClass('logo755');
        },
        rouFunc: function () {
            /* 原有匹配逻辑完全不变 */
            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;
            }
        }
    }
}

修改后不管是首次打开页面、直接输入地址访问、还是点击路由链接，只要路由更新完成就会自动匹配正确的导航展示内容，异步懒加载的时序问题也可以完全解决。

内容的提问来源于stack exchange，提问作者hamid-davodi