vue3路由配置好了不显示

Question

1：这是配置文件

2：这个是单独页面

3：这个是路由文件

4：这个是main.js文件

5：这个是App.vue文件

6：最后这个是浏览器，就是显不出来新增的页面

Answer 1

【相关推荐】

• 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7736921
• 这篇博客你也可以参考下：vue3的自定义指令怎么用vue3的全局自定义指令怎么写。自定义指令的钩子函数。简单易懂
• 您还可以看一下 董秀玲老师的Vue全家桶基础+实战高仿美团外卖App课程中的 Vue3介绍和环境搭建小节, 巩固相关知识点
  
• 除此之外, 这篇博客: Vue3 京东到家项目实战第一篇（首页及登录功能开发） 进阶式掌握vue3完整知识体系中的 通过代码拆分增加逻辑可维护性💥 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

  现在我们把各种函数都放在了 setup 中，这样做肯定没有出错，但是这样会让我们的 setup 函数非常长，如果项目做到后面我们要在里面找某一个函数或者变量的时候，都很麻烦，如果把关于登录逻辑的数据和方法都放在 setup 外面的一个函数中，关于注册逻辑的数据和方法放在另一个函数中，这样再把这些函数在 setup 中接收，在 setup 中我们只关心整个页面的实现逻辑就行，这样整个代码的维护性和可读性都大大提高了。

  在登录页面我们把向后端发送登录请求的相关逻辑从 setup 中抽离出来：

  const useLoginEffect = () => {
    const router = useRouter()
    let username = ref('')
    let password = ref('')
    let handleLogin = async () => {
      if (username.value === '' || password.value === '') {
        alertmessage('输入内容不能为空', 'warning', 1500)
        return
      }
      try {
        const result = await post('/api/user/login', {
          username: username,
          password: password
        })
        if (result.data.errno === 0) {
          localStorage.isLogin = true
          alertmessage('登录成功欢迎您', 'success', 2000)
          setTimeout(() => {
            router.push({ name: 'home' })
          }, 2000)
        } else {
          alertmessage('登录失败', 'error', 2000)
        }
      } catch (e) {
        alertmessage('请求失败', 'error', 2000)
      }
    }
    return { username, password, handleLogin }
  }

  这里我们重新定义了一个useLoginEffect 函数，然后把需要用到的数据和方法都放进来，最后通过 return 把数据和方法返回出来，以便在 setup 中接收。

  我们再把点击注册这个函数的相关逻辑抽离出来：

  const useRegisterEffect = () => {
    const router = useRouter()
    let handleRegisterClick = () => {
      ElNotification({
        title: '尊敬的用户您好',
        message: h('i', { style: 'color: teal' }, '正在跳转到注册页面'),
        duration: 800
      })
      setTimeout(() => {
        router.push({ name: 'register' })
      }, 900)
    }
    return { handleRegisterClick }
  }
  

  这样我们就把登录页面相关的功能都从 setup 里面抽离了出来，现在再看 setup 里的代码就优雅了许多，浅显易懂：

  setup () {
      const { username, password, handleLogin } = useLoginEffect()
      const { handleRegisterClick } = useRegisterEffect()
      return {
        handleLogin,
        username,
        password,
        handleRegisterClick
      }
    }

  在 setup 里我们很清晰的知道这个页面的实现逻辑，如果想修改跳转登录这个函数就去对应的函数里修改就可以，方便了很多。

  在注册页面的代码拆分和登录页面的相同，这里就不过多阐述。在本文中我们暂时完成了项目首页和登陆注册页面的样式，实现了登陆注册时向后端发送请求获取数据的功能，最后通过代码拆分增加逻辑可维护性。下一篇文章我们会实现商家展示功能的开发，大家记得关注哦！

  项目代码地址：

  https://gitee.com/jie_shao1112/jingdong-homehttps://gitee.com/jie_shao1112/jingdong-home
   

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^