Vue笔记，持续更新

{
    mounted() {
        // get ele via ref
        this.$refs.xxx   // fail 
        
        // get ele via document.querySelecor
        document.querySelector('.xxx')
    }
}

// 假设页面路由模式是hash，当前路径是#/path/to?state=pending
// 当按下button时，会触发当前路由参数的改变
new Vue({
    template: `
        
            Push State
        

    `,
    beforeRouteUpdate(to, form, next){
        // 此时这里this.$route还是之前的route
        console.log(this.$route.query.state) // pending
        next()
    },
    watch: {
        // $route的变化，可能跳到其他页面，也可能是其他页面跳到此页面
        // 一般我们只需要设置其他页面跳到此页面就行了。
        // 对于使用了组件的，直接使用activated钩子就行了
        $route(to, from) {
            // watch $route回调里的$route，已是更新后的$route
            console.log(this.$route.query.state)  // completed
        }
    },
    methods: {
        click() {
            this.$router.push(`/path/to?state=completed`)
        }
    }
})

let vm = new Vue()
// 取$route匹配的最后一个$route的instances.default
vm.$route.matched[vm.$route.matched.length - 1].instances.default