用vite创建的vue3项目,404重定向不过去,不起作用。我不知道哪个地方写的有问题,感觉没问题啊,就是无论什么路由,都是首页:helloworld页面,根本去不了404.vue页面。
用vite创建的vue3项目,404重定向不起作用??
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
18条回答 默认 最新
关注 获得0.60元问题酬金 由人工智能和答主提供,可以参考如下,如果回答的不正确,及时评论区回复,我追加回答,谢谢。
在Vite创建的Vue 3项目中,实现404页面重定向可以通过在Vue Router中配置catch-all
路由。以下是一种可能的解决方案:安装 Vue Router:
确保你的项目已经安装了Vue Router。如果没有安装,可以使用以下命令进行安装:npm install vue-router@4
配置路由:
在你的src
目录下创建一个router
文件夹,并在里面创建一个index.js
文件。在这个文件中配置你的路由,包括404页面的重定向。例如:// src/router/index.js import { createRouter, createWebHistory } from 'vue-router' import Home from '../views/Home.vue' import NotFound from '../views/NotFound.vue' const routes = [ { path: '/', name: 'Home', component: Home }, // Other routes... // 404 Redirect { path: '/:catchAll(.*)', name: 'NotFound', component: NotFound } ] const router = createRouter({ history: createWebHistory(), routes }) export default router
确保你的项目目录结构如下:
- src - views - Home.vue - NotFound.vue - router - index.js
修改
main.js
:
在你的src
目录下的main.js
中引入并使用路由:// src/main.js import { createApp } from 'vue' import App from './App.vue' import router from './router' createApp(App).use(router).mount('#app')
404 页面组件:
确保你有一个名为NotFound.vue
的文件,用于显示404页面的内容。<!-- src/views/NotFound.vue --> <template> <div> <h1>404 Not Found</h1> <p>Sorry, the page you are looking for does not exist.</p> </div> </template> <script> export default { name: 'NotFound' } </script> <style scoped> /* Add your styles here */ </style>
启动项目:
重新启动你的Vite开发服务器:npm run dev
确保没有报错,并尝试访问不存在的页面,看看是否被正确重定向到404页面。
以上步骤应该可以帮助你实现404页面的重定向。如果仍然存在问题,请确保代码没有其他错误,或者尝试重新创建一个简单的项目以测试。
解决 1无用
悬赏问题
- ¥15 stm32u535芯片usb hid custom类接收数据有问题
- ¥20 quartus功能仿真
- ¥15 传染病最优控制问题,控制为什么没起作用
- ¥15 ue5.3 pico打包失败 求帮助
- ¥15 请教,这是用chatgpt写的CAD LISPD脚本,需求是画一个由双直线组成的矩形
- ¥50 微信小程序 成功包奶茶啊
- ¥15 计算机博弈的六子棋代码
- ¥15 在Fetch API中传送的参数为何不起作用?
- ¥15 问题遇到的现象和发生背景 360导航页面千次ip是20元,但是我们是刷量的 超过100ip就不算量了,假量超过100就不算了 这是什么逻辑呢 有没有人能懂的 1000元红包感谢费
- ¥30 计算机硬件实验报告寻代