账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    如何优化这个vue父子视图/组件异步控制方案
    39
    0

    技术栈:vue全家桶(vue 2.x)

    背景:
    父子视图,访问/的时候,异步加载

    //视图层级:
    <Root>
        <App>
            <Home>
                <Components>
    //路由配置如下:
    const router = new Router({
        routes: [
            {
                path: '/',
                component: resolve => require(['Home.vue'], resolve),
                children:[
                    {
                        path: '',
                        component: resolve => require(['components/Rock.vue'], resolve)
                    },
                    {
                        path: 'rock',
                        component: resolve => require(['components/HipPop.vue'], resolve)
                    },
                    ...
                ]
              }
          ]
      })
    

    父视图挂载之后,会发送请求向后端获取一个关键数据userId
    子视图挂载之后,会执行鉴权函数,通过之后就可以进行后续操作,鉴权函数需要依赖用户id

    遇到的问题
    第一次加载时,父视图还没获取到userId,而子视图已经开始执行鉴权函数了

    自己的探索
    方案一:把路由的加载模式改为同步模式。
    治标不治本,父组件在获取的数据的时候,会存在延迟的情况,也就不能避免子组件挂载之后执行函数

    方案二:依然是异步路由加载。

    1. userId存到Vuex
    2. 当父组件获取到userId的时候,写到Vuex里
    3. 子组件,watch Vuex的userId,如果有变动,就去执行鉴权函数
    4. 因为考虑到后续切换子组件,所以mounted钩子也要去执行鉴权函数

    请教
    有咩有其他比价好的方案?

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 清月映竹 普通会员 1楼
      502 Bad Gateway

      502 Bad Gateway


      nginx
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部