beforeRouteEnter()路由守卫内next(vm=>{})函数二次进入相同路由不执行

Question

具体代码如下：

async function initFetch(router) {
    const id = router.params.id
    return $store.dispatch('Article/single', id).then(res=>{
        return res
    })
}

async beforeRouteEnter(to, from, next) {
        try {
            let data = {
                status: 'publish'
            }
            if ( ADMIN['query-lang'] ) {
                data.lang = ADMIN['query-lang']
            }
            if ( to.params.id ) {
                data = await initFetch(to)
            }
            next(vm => vm.setPosts(data))
        } catch (error) {
            next(vm => vm.$router.push('/article/paged/1'))
            throw error
        }
    },

从/article/edit/:id路由跳转到/article/add后再切换回/article/edit/:id时，beforeRouteEnter()内部的next(vm=>{})不执行

Answer 1

以下内容由CHATGPT及笑面虎共同生成、有用望采纳：

---

【问题概括】 这个问题的目的是解决在Vue.js中使用beforeRouteEnter路由守卫时，当用户从/article/edit/:id路由跳转到/article/add后再切换回/article/edit/:id时，守卫中的next(vm=>{})函数不执行的问题。

【问题出现原因】 在Vue.js中，beforeRouteEnter守卫的特殊之处在于它在路由被确认前调用，此时无法访问this，因为当守卫执行前，组件实例还没被创建。所以，next(vm=>{})中的vm参数在首次进入路由时是不可用的，但是在二次进入相同路由时，由于组件实例已经被创建，所以vm参数是可用的。问题出现的原因是，当二次进入路由时，守卫中的异步操作initFetch可能还没有完成，但是路由已经尝试进入组件，导致next函数中的vm参数已经不可用。

【问题解决方案】 为了解决这个问题，我们可以在next函数中传递一个回调函数，这个回调函数在组件实例化后执行。这样，即使在异步操作未完成的情况下，我们也能确保vm参数是可用的。

【提供代码】 下面是修改后的beforeRouteEnter守卫代码：

async beforeRouteEnter(to, from, next) {
    try {
        let data = {
            status: 'publish'
        };
        if (ADMIN['query-lang']) {
            data.lang = ADMIN['query-lang'];
        }
        const initPromise = to.params.id ? initFetch(to) : Promise.resolve(data);
        next(vm => {
            initPromise.then((fetchedData) => {
                vm.setPosts(fetchedData);
            }).catch((error) => {
                vm.$router.push('/article/paged/1');
                throw error;
            });
        });
    } catch (error) {
        next(vm => vm.$router.push('/article/paged/1'));
        throw error;
    }
},

【代码运行方式】 这段代码应该在一个Vue.js项目中运行，确保你已经安装了Vue.js和Vue Router。你需要将这段代码替换到你的项目中对应的路由守卫部分。

【代码预期运行结果】 当用户从/article/edit/:id路由跳转到/article/add后再切换回/article/edit/:id时，beforeRouteEnter守卫中的异步操作initFetch将正确执行，并且setPosts方法将在组件实例化后被调用。

【推荐相关链接】

• Vue.js官方文档 - 路由守卫
• Vue.js官方文档 - beforeRouteEnter
• JavaScript Promises