基于vue2 封装的面包屑 tag数量问题

Question

目的: 封装一个面包屑

我的思路是：在面包屑组件中（该组件常驻）通过watch监听$route然后向routes数组中push $route ，后续的面包屑点击需要用到route

问题：push次数不可控

watch: {
        $route: function() {
            if (this.routes.length > 9) {
                this.$message("最多打开十个标签");
                return;
            }
            for (let i = 0; i < this.routes.length; i++) {
                console.log(this.routes[i]);
                if (this.routes[i].name !== this.$route.name) {
                    // 遍历添加之前的路线数组
                    this.routes.push({ name: this.$route.name, title: this.$route.meta.title });
                    // 第一次和第二次跳转正常
                    // 第三次跳转，第三次的路线会push两次，
                    // 第四次跳转，第四次的路线会push四次，
                    // 第五次跳转，第五次的路线会push六次
                    // 就像上面那样依次递增
                }
            }
        },
        routes() {
            window.localStorage.setItem("route", JSON.stringify(this.routes));
        },
    },
    created() {
        this.routes = JSON.parse(window.localStorage.getItem("route")) || [
            { name: "userList", title: "认证用户列表" },
        ];
    },

Answer 1

你应该查找routes中没有该name，然后添加，而不是判断每一项进而添加。举个简单的例子，你有一个数组[1, 2]，现在判断的目标是3，会遍历两次，第一次判断1不等于3，会向数组中添加一次3，第二次判断2不等于3，又会向数组中添加一次3，就是这个道理

把for循环替换成下面代码

if(!this.routes.some(route => route.name === this.$route.name)){
    this.routes.push({ name: this.$route.name, title: this.$route.meta.title });
}