守卫拦截后，首页生命周期函数不执行

[wou101771]

问题描述 在真机调试的时候会出现这个问题 系统默认主页是登录页，路由守卫做了token判断，没有token强制跳到登录页。登录之后有了token，才能进入首页。但是进入首页后，首页的生命周期函数，onLoad，onShow等内的函数不执行了。

[SilurianYang]

你可以帖上路由守卫的所有代码吗？ 保证是通过next跳转的 而不是实例化对象

[wou101771]

你可以帖上路由守卫的所有代码吗？ 保证是通过next跳转的 而不是实例化对象

router.beforeEach((to, from, next) => {
  //判断是否登录
  if (!uni.getStorageSync("token")) {
    if (to.path !== '/pages/views/login/login') {
      return next({
        path: '/pages/views/login/login',
        NAVTYPE: 'push'
      });
    }
    next()
  } else {
    next()
  }

});

[SilurianYang]

看起来没有任何问题！你可以上传一个demo吗？我帮你看看

[wou101771]

看起来没有任何问题！你可以上传一个demo吗？我帮你看看

我不知道怎么上传 我直接贴代码吧

[wou101771]

登录页

<template>
  <view class="u-flex wrap">
    <text class="title  u-font-19">欢迎登录</text>
    <view class="groups">
      <u-field :field-style="fieldStyle"
               v-model="tel"
               label="手机号码"
               :border-bottom="false"
               placeholder="请输入手机号码"></u-field>
    </view>

    <view class=" u-flex buttons">
      <u-button :custom-style="buttonStyl"
                type="error"
                :disabled="!canGetCaptcha"
                @click="getCaptcha">{{tips}}</u-button>

    </view>

    <u-verification-code :seconds="60"
                         ref="ucode"
                         start-text="获取验证码"
                         change-text="X秒后重新获取"
                         end-text="重新获取"
                         @change="codeChange"></u-verification-code>
    <u-popup v-model="showInput"
             mode="center"
             :border-radius="50"
             length="90%"
             :mask-close-able="false">
      <view class="u-flex captcha">
        <u-message-input class="u-margin-top-80"
                         :focus="true"
                         :maxlength="6"
                         @finish="finish"></u-message-input>
        <view class="u-margin-50 tips"
              @click="getCaptcha">{{tips}}</view>
      </view>
    </u-popup>
    <br />
    <br />
    <view class="test-b"
          @click="testLogin">测试登录通道</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tel: "",
      loading: false,
      tips: "",
      showInput: false,
      buttonStyl: {
        width: "500rpx",
        marginTop: "20rpx",
      },
      fieldStyle: {
        width: "500rpx",
      },
    };
  },
  onLoad() {
    uni.hideLoading();
  },
  computed: {
    canGetCaptcha() {
      return !this.$u.test.isEmpty(this.tel);
    },
  },
  methods: {
    //获取短信验证码
    getCaptcha() {
      if (!this.$u.test.mobile(this.tel)) {
        this.$u.toast("手机号码格式错误");
        return;
      }
      if (this.$refs.ucode.canGetCode) {
        //发送短信验证码的方法
        this.$http.api
          .phoneCode({
            userPhone: this.tel,
          })
          .then((res) => {
            if (res.data.code === 200) {
              this.showInput = true;
              uni.setStorageSync("token", res.header["access-token"]);
              this.$refs.ucode.start();
            } else {
              this.$u.toast(res.data.message);
            }
          });
      }
    },
    codeChange(text) {
      this.tips = text;
    },
    finish(value) {
      this.$http.api
        .phoneLogin({
          userPhone: this.tel,
          phoneCode: value,
        })
        .then((res) => {
          if (res.data.code === 200) {
            uni.setStorageSync("token", res.header["access-token"]);
            /* 正常登录-前往主页 */
            this.$http.api.userinfo().then((res) => {
              uni.setStorageSync("userInfo", res.data.data);
            });
            this.$router.replace({ path: this.$pageUrl.tabBar.home });
          } else {
            this.showInput = false;
            this.$u.toast(res.data.message);
          }
        });
    },
    testLogin() {
      this.$http.api
        .textlogin({
          userName: "18085021642",
          userPassword: "4BNh2f2,",
        })
        .then((res) => {
          uni.setStorageSync("token", res.header["access-token"]);
          this.$http.api.userinfo().then((res) => {
            uni.setStorageSync("userInfo", res.data.data);
          });
          uni.switchTab({
            url: this.$pageUrl.tabBar.home,
          });
        });
    },
  },
};
</script>

[SilurianYang]

点击这里就可以上传demo啦

[wou101771]

点击这里就可以上传demo啦

我把我的代码传到我的仓库了，麻烦你看一下。在真机调试的时候，第一次加载的时候，Home主页的生命周期都不生效

[SilurianYang]

@wou101771 请给出连接

[wou101771]

@wou101771 请给出连接

https://github.com/wou101771/123

[SilurianYang]

经测试没有重现首页生命周期不执行的问题

[wou101771]

经测试没有重现首页生命周期不执行的问题

忘了说了，只有在安装好后第一次启动的时候会出现。我每次测试完都要卸载手机基座，重新安装测试的

[wou101771]

经测试没有重现首页生命周期不执行的问题

还有就是，退出后重新登录，也不会触发

[SilurianYang]

先了解下 NAVTYPE 第一次没安装是肯定没有token的 接着你重定向到登录，首页会帮你保留。所以你重新跳过去的时候就不会触发onload 还有就是跳转都尽量使用插件的api而不是用官方的。H5则不同，具体请查阅History_API

[wou101771]

先了解下 NAVTYPE 第一次没安装是肯定没有token的 接着你重定向到登录，首页会帮你保留。所以你重新跳过去的时候就不会触发onload 还有就是跳转都尽量使用插件的api而不是用官方的。H5则不同，具体请查阅History_API

了解了

[SilurianYang]

@wou101771 NAVTYPE 由 push换成 replace或者 replaceAll 即可实现同h5一样的效果。

[wou101771]

先了解下 NAVTYPE 第一次没安装是肯定没有token的 接着你重定向到登录，首页会帮你保留。所以你重新跳过去的时候就不会触发onload 还有就是跳转都尽量使用插件的api而不是用官方的。H5则不同，具体请查阅History_API

了解了

那怎么办，加一个中转页还是？

[wou101771]

ro

@wou101771 NAVTYPE 由 push换成 replace或者 replaceAll 即可实现同h5一样的效果。

路由跳转在APP上咋不生效