vue 关于购物车总数取值处理

login.vue

点击【登录】登录成功后跳转至/index页面，并带上从/login 登录页面跳转过来的唯一标识params == 'login'

this.axios
                .post('/user/login', {
                    username,
                    password,
                })
                .then((res) => {
                    // params传参  对象的方式传参
                    this.$router.push({
                        name: 'index', //登录成功后跳转至/index页面
                        params: {
                            form: 'login', //带上路由标识
                        },
                    });
                });

NavHeader.vue

一进页面，就获取一下路由传参，如果params == 'login' 就调用获取购物车方法，否则不调用

mounted() {
        // 从登陆页面过来的才调用获取购物车方法
        let params = this.$route.params;
        // params 为true且值为login
        if (params && params == 'login') {
            this.getCartCount();
        }
    },

这么做的好处是，在App.vue调用了一次getCartCount();在项目加载时先去加载获取购物车数量的方法，给头部的购物车数量赋值，但在页面刷新的时候不会再调用getCartCount()，如果用户登录——增加3件商品到购物车——退出——再登录——顶部的购物车总数量不会+3，因为再次登录只是页面刷新，在App.vue的getCartCount()方法不会再次调用，所以需要再NavHeader.vue单独再调用一次，确保购物车总数量是最新的值