小编Nim*_*ker的帖子

Vue 3 Composition API useRouter() 在 onMounted 钩子内

useRoute我想在 onMounted 挂钩中调用的组件内部使用。就像是

import { checkUserAuth } from '@/common/CheckUserAuth'

onMounted(async () => {
  await checkUserAuth()
})
Run Code Online (Sandbox Code Playgroud)

CheckUserAuth.ts 是:

import { useRouter } from 'vue-router'

const router = useRouter() // here router is undefined

export const checkUserAuth = async () => {
  const userStore = useUserStore()
  const userApi = new UserApi()
  const token = localStorage.getItem(TOKEN_NAME)

  const router = useRouter() // and here too router is undefined

  if (!token) {
    await router.push({ name: LOGIN_PAGE_ROUTE })

    return
  }

  const userData = await …
Run Code Online (Sandbox Code Playgroud)

vue.js vue-router vuejs3 vue-composition-api

5
推荐指数
1
解决办法
2987
查看次数

Vue-3 中动态导入图像

我正在尝试显示动态导入的图像,但它无法处理错误

“找不到模块”

这是我的组件

<template>
      <div class="footer">
        <div v-for="footerItem in getters" :key="footerItem.id">
          <img :src="methods.requireImage(footerItem.icon)" alt="">
        </div>
      </div>
    </template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useStore } from '@/store'
import { requireImage } from '@/modules/images'

export default defineComponent({
  name: 'Footer',
  setup () {
    const store = useStore()
    const methods = {
      requireImage
    }

    return {
      getters: store.getters.getFooterItems,
      methods
    }
  }
})
</script>
Run Code Online (Sandbox Code Playgroud)

这是模块

export const requireImage = async (link: string) => {
  // return require(link)
  const image = …
Run Code Online (Sandbox Code Playgroud)

javascript webpack vue.js vue-cli vuejs3

2
推荐指数
1
解决办法
6033
查看次数