Vue子应用问题解决及其心得

页面延迟一会儿才布满屏幕

考虑是因为页面的高度不是100%的原因，解决步骤如下

给body设置高度为 height:100%
在 App.vue 文件中添加样式

#app{
  height 100%;
}

然后看看是否解决了问题，如果没有则在页面的View组件外在套一层 div ，并设置height: 100%。

某个页面禁用缓存

首先在该需要禁用缓存的页面的路由配置中添加 meta 信息 disableCache：true，表示该页面具有缓存功能。

{
    path: "/questionaire-fill/:id/:operation",
    name: "fill",
    meta: {
      disableCache: true,
    },
    component: Fill,
},

然后修改 App.vue 中的内容，这样，keepAlive为true，利用Vue-Router的条件渲染来实现不同路由进入不同的路由视图实现页面禁用缓存功能。

    <transition :name="routerTransition">
      <keep-alive>
        <router-view v-if="!$route.meta.disableCache" />
      </keep-alive>
    </transition>
    <transition :name="routerTransition">
      <router-view v-if="$route.meta.disableCache" />
    </transition>

调用接口的时候请求的域名地址一直不对，导致接口调不通

首先查看.env.development的配置是否是正确的，如果是正确的则看下一步。
查看 request 的配置，看看 axios 请求基路径配置是否正确。是否与.env.development里面的配置匹配。比如，你的配置里面叫 VUE_APP_DEV_BASE_URL，然后你的axios基路径像下面这样获取的，肯定是调不通的。

authedAxios.defaults.baseURL = process.env.VUE_APP_BASE_URL

在线子应用的 token 最好不要用桥接调用

因为考虑到可能在线子应用后期可能会有外部平台也能访问的需求，最好是通过将 token信息拼接到访问路径后面的方式来获取。如：

http://xxxxxx?access_token=1234354543545;

如监听网络请求的成功或失败

使用 axios 的拦截功能。可以给全局的 axios请求添加响应拦截。你可以在当前模块的store 里面添加一个 networkSuccess 字段来表示请求成功与否。下面拿具体的代码来说明。

// 添加响应拦截器
authedAxios.interceptors.response.use((response) => {
    let result = response.data
    if (!result.failed) {
        // 将store里的字段置为 true
        store.commit('questionaire/setNetworkSuccess', true, {root: true});
        return Promise.resolve(result);
    } 
    toast(result.message);
    return Promise.reject(result)
}, (err) => {
    // 发生网络错误后会走到这里
    if (err) {
        // 如果接口没调通，将store里的字段置为 false
        store.commit('questionaire/setNetworkSuccess', false, {root: true});
        toast.show(err.message)
        return Promise.reject(err)
    }
})

一些开发的心得体会

如果页面的数据存到了 store 里面，并且该页面的数据是下次进入是实时更新的，退出当前页面前一定注意清楚 store 里面的数据。
当你某个时候思路特别不清晰的不要写核心逻辑代码，不然一定会返工的。可以写写边缘逻辑或者样式之类的。