Nuxt-Link跳转之后显示的问题

Question

Nuxt-Link跳转之后显示的问题

发布于
2022-04-19

新手上路，请多包涵

代码

import '@/assets/sass/login.sass'
  const config  = useRuntimeConfig()
  const active = ref(1)
  useHead({
    script:[
      {src: "/wxLogin.js"}
    ]
  })
  onMounted(()=>{
    new WxLogin({
      id: "login_wechat",
      appid: config.wechat.appid,
      scope: "snsapi_login",
      redirect_uri: encodeURI("http://www.wjchome.cn/api/login_wechat"),
      href: encodeURI("https://static.wjchome.cn/open_wechat/css/wxlogin.css")
    })
  })
  const changeWay = (num)=>{
    active.value = num
  }

在使用F5键刷新/直接进入页面/a标签可以正常显示

在使用NuxtLink组件加载的情况下出现如下报错

[Vue warn]: Unhandled error during execution of mounted hook 
  at <Login onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {__v_skip: true} > key="/login" > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="page" mode="out-in" > 
  at <RouterView > 
  at <NuxtPage> 
  at <Anonymous > 
  at <Anonymous > 
  at <Anonymous> 
  at <App key=1 > 
  at <NuxtRoot>
warn2 @ runtime-core.esm-bundler.js:38
logError @ runtime-core.esm-bundler.js:212
handleError @ runtime-core.esm-bundler.js:204
callWithErrorHandling @ runtime-core.esm-bundler.js:158
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:164
hook.__weh.hook.__weh @ runtime-core.esm-bundler.js:2685
flushPostFlushCbs @ runtime-core.esm-bundler.js:356
flushJobs @ runtime-core.esm-bundler.js:401
Promise.then(异步)
queueFlush @ runtime-core.esm-bundler.js:285
queueJob @ runtime-core.esm-bundler.js:279
(匿名) @ runtime-core.esm-bundler.js:5168
triggerEffects @ reactivity.esm-bundler.js:382
triggerRefValue @ reactivity.esm-bundler.js:982
(匿名) @ reactivity.esm-bundler.js:1113
triggerEffects @ reactivity.esm-bundler.js:382
triggerRefValue @ reactivity.esm-bundler.js:982
set value @ reactivity.esm-bundler.js:1026
finalizeNavigation @ vue-router.esm-bundler.js?v=b4b1ef70:3194
(匿名) @ vue-router.esm-bundler.js?v=b4b1ef70:3067
Promise.then(异步)
pushWithRedirect @ vue-router.esm-bundler.js?v=b4b1ef70:3038
push @ vue-router.esm-bundler.js?v=b4b1ef70:2966
navigate @ vue-router.esm-bundler.js?v=b4b1ef70:2093
callWithErrorHandling @ runtime-core.esm-bundler.js:155
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:164
invoker @ runtime-dom.esm-bundler.js:369
login.vue:41 
        
       Uncaught (in promise) ReferenceError: WxLogin is not defined
    at login.vue:41:1
    at callWithErrorHandling (runtime-core.esm-bundler.js:155:22)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:164:21)
    at Array.hook.__weh.hook.__weh (runtime-core.esm-bundler.js:2685:29)
    at flushPostFlushCbs (runtime-core.esm-bundler.js:356:32)
    at flushJobs (runtime-core.esm-bundler.js:401:9)