关于Vue生命周期和获取route信息的时机

Vue相关
Vue

1.vue项目直接在组件的mounted生命周期里面获取this.$route信息是获取不到的（第一次刷新，估计是当时vue-router还没有完全加载好），要使用路由信息的话，建议在watch里面监视‘route，然后再做接下去的操作。

1
2
3
4
5
6
7
8
9
10
watch: {
    $route: function(val) {
        for (let i = 0; i < this.realTabData.length; i++) {
            const item = this.realTabData[i];
            if (item.route_name == val.name) {
            this.active = i;
        }
        }
    }
}

2.vue在computed计算属性里面如果有使用到$refs或者一些DOM的属性方法，会返回underfined并报错（因为这时候dom并没有渲染）
解决方法是声明一个状态变量isMounted，在created里面$nextTick事件里面去赋值它为true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
data(){
    return{
        isMounted:false
    }
},

created() {
    this.$nextTick(() => {
        this.isMounted = true;
    });
},

computed: {
    tabLineLeft() {
        if (this.isMounted) {
            //这个时候$refs已变的可用
            return (this.active / this.realTabData.length) * this.$refs.tabBar.clientWidth ;
        }
    }
}