vue项目中没有build文件夹（在Vue3项目中，输入没有路由对应的路径时候，怎么跳转到404或者首页）

在一个Vue3应用中  
    
    
    
  ，通常情况下

     


     


     


     
，我们使用Vue Router来处理路由  
    
    
    
  。在Vue Router中 




 




 




 




，当用户请求输入一个不正确的URL路径时  

   

   

   

 ，没有路由与其相匹配

     

     

     

     ，这时候会返回一个默认的404页面或者重定向到首页

     


     


     


     
。因此  




  




  




  




，本文将通过以下几个方面来讨论如何在Vue3项目中实现这一功能 




 




 




 




。

1. 异步组件

在Vue3中  


  


  


  


，我们可以使用异步组件来延迟加载路由组件
     
     
     
     ，并在组件加载完成前显示一个加载指示器  

   

   

   

 。异步组件可以通过函数返回一个promise来实现
   




   




   




   



，该promise在组件加载成功后resolve

     

     

     

     。

const Example = () => import(./Example.vue)

对于异步组件 



 



 



 



，当路由不能匹配时                    ，Vue Router可以自动加载404组件  




  




  




  




。这要求您在路由表中明确定义404路由

    




    




    




    


，并将其放在最后  


  


  


  


。这是一个示例：

const routes = [ { path: /home, component: Home }, { path: /example, component: Example }, { path: /404, component: NotFound }, { path: *, redirect: /404 } ]

在这个示例中



















，我们向路由表中添加了一个NotFound组件                    ，当路径不匹配时就会被加载
     
     
     
     。

2. 全局前置守卫

Vue Router还提供了另一种处理404的方法——全局前置守卫
   




   




   




   



。这种方法涉及使用beforeEach钩子函数

     



     



     



     

，在导航到任何路由之前进行检查 



 



 



 



。如果没有匹配的路由



















，则可以将用户重定向到404页面                    。

router.beforeEach((to, from, next) => { if (to.matched.length === 0) { next(/404) } else { next() } })

在上面的代码中  
    
    
    
  ，我们检测了即将要跳转到的路由对象是否拥有matched属性

     


     


     


     
，如果有 




 




 




 




，那么继续跳转  

   

   

   

 ，否则就重定向到/404路由

    




    




    




    


。

3. HTML5 history模式

Vue Router还支持HTML5 history模式

     

     

     

     ，在这种模式下  




  




  




  




，我们可以将URL路径看起来像接近传统网站中的路径  


  


  


  


，而不是像一个前端路由



















。例如
     
     
     
     ，我们可以让www.xxx.com/about与/about匹配                    。

在HTML5 history模式下使用时
   




   




   




   



，客户端发送的任何请求都将被发送到服务器 



 



 



 



，而服务器将始终返回同一HTML文件

     



     



     



     

。因此                    ，在后端设置路由规则是必要的



















。

为在vue-router中启用history模式

    




    




    




    


，需要使用vue-router选项中的mode属性：

const router = new VueRouter({ mode: history, routes: [...] })

在使用HTML5 history模式时



















，如果用户访问的URL不存在                    ，则可以将用户重定向到默认首页或自定义404页面  
    
    
    
  。

4. 计算属性

在Vue3中

     



     



     



     

，我们还可以使用计算属性来实现处理404的逻辑

     


     


     


     
。我们可以根据路由对象中matched属性的长度来检测是否有匹配的路由 




 




 




 




。如果没有



















，我们可以使用$route.path将用户重定向到自定义404页面  

   

   

   

 。

<template> <div v-if="isNotFound"> <h1>404 Not Found</h1> </div> </template> <script> export default { computed: { isNotFound() { return this.$route.matched.length === 0 } }, watch: { isNotFound(val) { if (val) { this.$router.push(/404) } } } } </script>

在上面的示例中  
    
    
    
  ，我们使用一个计算属性isNotFound和一个watcher来监视isNotFound的变化

     

     

     

     。当isNotFound变为true时

     


     


     


     
，我们将路由推送到/404  




  




  




  




。

结论

在Vue3中 




 




 




 




，处理404页面的方法有很多  


  


  


  


。我们可以使用异步组件    
    
    
    
、全局前置守卫   


     


     


     


  、HTML5 history模式以及计算属性等技术来实现这一功能
     
     
     
     。这些方法可以根据我们的需求和项目的规模进行选择
   




   




   




   



。无论使用哪种技术  

   

   

   

 ，我们都应该遵循最佳实践并保持代码清晰易读

     

     

     

     ，并且对用户友好 



 



 



 



。