VueRouter类实例的应用和全局前置路由

1、VueRouter类管理组件路由routes

 2、全局前置路由（to：去哪个路由，from：来自那个路由，next：实质是一个函数方法，一般直接调用【next('路由路径')、next()等】）注意：这里可以解决每次跳转路由用户数据丢失的情况，很重要！！

// 全局前置守卫

router.beforeEach(async (to, from, next) => {

    // 用户是否跳转，取决于仓库里面是否有token

    // 每一次路由跳转之前都需要有用户信息在跳转，没有就发请求获取用户信息在跳转

    let hasToken = store.state.user.token;

    // 用户信息

    let hasNickName = store.state.user.nickName;

    // 用户登录

    if (hasToken) {

        // 用户登录，不能去login

        if (to.path == '/login') {

            next('/home')

        } else {

            //用户登录了。而且还有用户信息

            if (hasNickName) {

                next()

            } else {

                //用户登录了。但是没有用户信息

                try {

                    // 发请求获取用户信息以后再放行

                    await store.dispatch('getUserInfo')

                    next()

                } catch (error) {

                    // token过期、失效，用户没有信息携带token发请求获取信息失败

                    await store.dispatch('logout')

                    next('/login')

                }

            }

        }

    } else {

        next()

    }

})

3、最后暴露出去

 4、文件分类