vue项目直接在地址栏输入路由地址显示cannot get xxx

最新推荐文章于 2024-06-07 11:18:30 发布
最新推荐文章于 2024-06-07 11:18:30 发布
阅读量2k 收藏 4
点赞数 1
文章标签： vue.js 前端 webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46370075/article/details/128791968
版权

自己刚刚尝试搭建了个项目，写完路由之后，发现在地址栏直接输入路由不好使，提示 cannot get xxx

但是如果是通过点击事件 this.$router.push({path: ‘/login’}); 进入就是好使的
在这里插入图片描述
在这里插入图片描述
但是如果点击刷新或者 直接在地址栏输入 就会报错 Cannot Get /login
在这里插入图片描述
在这里插入图片描述
后来在网上查完之后 发现是因为 开发环境的webpack配置里没有配devServer.historyApiFallback: true导致的。
在这里插入图片描述
不过webpack官网这个 historyApiFallback 这块的介绍我没太读懂：当使用HTML5 history模式的API时，index.html页面很可能必须用来代替任何404响应。通过将devServer.historyPiFallback设置为true来启用：

这句话的意思难道是不加这个，浏览器就会直接把地址栏的地址当成网络请求？当后端没有这个地址的时候就报cannot get xxx? 加上这个配置之后他就会先从前端路由里找，找不到的时候再去后端找吗。

这块没太懂，不过问题确实解决了。加完这个配置之后，直接在地址栏输入路由地址也能跳转到对应的路由页面了。

姝光
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue地址栏直接输入路由无效问题（回车也无效）
zezeadede555的博客
04-10 3947
1、参考网址：https://www.jianshu.com/p/06b004c6772f vue 项目只要不是静态页面，一般都会和官方的路由管理器 vue-router 一起使用。 最近项目有一个需求，是在地址栏输入路由，跳转到对应路由组件，在开发环境中这样做是可以跳转的，但是项目打包后，路由可以访问，但是回车会有404页面的报错 因为 vue 在页面上显示哪个组件是根据 vue-rout...
解决vue脚手架项目打包后路由视图不显示的问题
10-18
总结来说，解决Vue CLI项目打包后路由视图不显示的问题，关键在于正确配置Vue Router的`base`选项，并在服务器端设置适当的路由重定向。这需要开发者对前端路由和服务器配置有深入的理解。通过这些调整，你的Vue项目...
vue 直接输入路由地址进入_vue地址栏直接输入路由无效问题的解决
weixin_30117665的博客
12-23 2703
vue 项目只要不是静态页面，一般都会和官方的路由管理器 vue-router 一起使用。最近项目有一个需求，是在地址栏输入路由，跳转到对应路由组件，在开发环境中这样做是可以跳转的，但是项目打包后，通过地址栏跳转会报错。因为 vue 在页面上显示哪个组件是根据 vue-router 进行控制的，在地址栏上直接输入路由名称，并不能触发 vue-router 的规则，所以只能通过监听地址的改变，利用回...
vue项目启动后页面显示‘Cannot GET /’
weixin_45721912的博客
05-09 852
1、npm run dev命令启动项目的时候没有报错，页面打开却提示 Cannot GET / 2.这个时候只需要找到config文件夹下面的index.js文件。把assetsPublicPath字符串的：‘./’修改成 ‘/’就行了。修改完之后记得关闭项目，然后重新启动。不然不会生效
点击浏览器刷新按钮页面显示: Cannot GET /xxx 问题解决
最新发布
Guojun19900715的博客
06-07 257
【代码】点击浏览器刷新按钮页面显示: Cannot GET /xxx 问题解决。
Vue项目中出现cannot get/的解决办法
林中明月间丶
01-08 8645
https://blog.csdn.net/tiantiandashi/article/details/81366315 听说是要重装安装request模块，执行： npm remove request npm install requset 搞定！感动天感动地。 npm run dev，去浪~ ...
vue项目页面cannot get / 错误解决办法
weixin_43080554的博客
04-14 7428
昨天做项目,打包部署到服务器之后,今天早上到公司npm run dev启动项目,页面报错cannot get / 开始以为是昨天打包的时候把config文件夹下的assetsPublicPath改成了"./“导致的 于是把”./“改回了”/"可还是不好用,于是又找了很多资料也没发现什么原因,后来我想页面显示的是connot get / 意思是获取不到/,是不是路由在编译的时候出了问题于是我把路由文...
【Vue3】发布为dist后，刷新路由页面出现404错误或Cannot GET /category错误（已解决）
【敦厚的曹操】的专栏
05-20 625
试了N多方法没有解决，最后，在router的配置文件index.js中，把createWebHistory换成createWebHashHistory,解决了！
vue GET http://localhost:8080/undefined/ 404 (Not Found)
赵达宇的博客
06-27 1951
具体来说，这里的data包含了两个东西：一个是redis缓存数据（也是就我们需要循环的数组)，一个是状态值success：true。我一开始以为，没从Redis取出来数据，但是当我用debug测试，发现，能够从Redis取出数据。检查后端代码，是这里统一返回类，返回data数据的时候，还加了success的状态。我在前端的时候，直接显示{{t}}的时候，我才看到明晃晃的 “true”。图片本来可以显示，但是加入Redis缓存后，就显示不了了。我看了N篇回答，并测试了，但都没解决问题。
Vue踩坑日记： history路由打包后无法加载
qq_42221363的博客
12-16 4120
在使用Vue框架时避免不了会使用到vue-router工具，Vue-router提供了Hash和History两种路由模式。默认为Hash模式，但此模式下URL中会存在 “#” 缺少美观，并且微信中不允许URL存在“#”。所以很多人会选择History路由模式。 const router = new VueRouter({ mode: 'history', // 设置为history模式 base: process.env.BASE_URL, ... }) 但是History路由模式也不是没有
vuerouter在history mode下刷新页面显示Cannot GET
gfhj778的博客
05-29 3579
1.配置history模式 ... export default new VueRouter({ mode: 'history', routes:[ { path:"/article/",name:'article',component:article, children:[ {path:"alist",component: alist} ] }, ] }) 这时候去访问http://localhost:8080/并且随便怎么搞点这点那都能显示
vue项目部署后刷新报404或Cannot get /xxx 解决方法
hk1052606583的博客
09-15 2679
项目npm run build 之后的dist放到ngigx中，修改下nginx的配置文件 ，在conf中的nginx.conf 将这部分代码修改为 listen 80; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; location / { root F:/Ng.
vue项目启动出现cannot GET /服务错误的解决方法
11-21
上午做了项目，中午吃完饭后回来再跑一次服务器， 出现 Cannot GET/： 控制台中并没有报错；npm run dev命令行窗口也没有报错。 原因 在网上查了一堆，发现这个问题还挺多呢，而且各个回答的解决方式都竟然有许多不同… 于是把能改的地方都改了…（基本上相当于将配置信息改回来） 关闭 history 模式 关闭history模式，用/#/路由的方式开启，（history模式要跑在服务端里面）； 更改端口号 更改端口号（没改的话打开原端口号自动加上登陆次数） 在 webpack.base.conf.js 配置信息里面，把自己改动的部分先注释掉再重新跑一下服务，在
vue地址栏直接输入路由无效问题的解决
10-17
主要介绍了vue地址栏直接输入路由无效问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
解决Vue配置路由不生效，自动跳转到首页
Hzz的博客
12-03 9213
解决Vue配置路由不生效，每次都重定向到首页的问题
vue-router不生效
qq_53719087的博客
09-20 1950
请确保您的路由链接指向正确的路径。如果您使用了HTML5 history模式，请确保您的服务器已经正确配置。没有正确安装和配置Vue Router。请确保您已经按照官方文档正确安装和配置了Vue Router。您的组件没有正确引入。请确保您的组件被正确引入到Vue实例中，以便路由可以正确匹配到组件。如果您仍然无法解决问题，请提供更多详细信息，以便我们可以更好地帮助您解决问题。请仔细检查您的路由配置，确保路径和组件名称都正确。
vue-router 新建路由访问不了
WGYHAPPY的博客
05-28 724
import Vue from 'vue' import Router from 'vue-router' import UidPanel from '@/components/UidPanel' Vue.use(Router) export default new Router({ routes: [ { path: '/uidPanel', name: 'UidPanel', component: UidPanel } ] }) 访问方式
vue-router历史模式下报Cannot Get
lovestj的博客
08-02 1359
场景 当路由被设置为history模式时，我们在请求链接时会遇到Cannot GET /about的提示，如下 这是因为当使用html5 history api,将会在响应404时返回index.html 所以我们可以通过如下设置来解决： ...
vue禁止输入地址栏直接访问页面
09-05
在Vue中，禁止通过地址栏直接访问页面可以通过以下两种方式实现： 1. 使用路由守卫：Vue Router提供了全局的路由守卫，可以在路由跳转之前进行拦截和控制访问权限。可以在路由配置中定义一个全局前置守卫，当用户尝试通过地址栏直接访问某个页面时，会被拦截并重定向到其他页面。例如，可以将所有需要禁止直接访问的页面重定向到登录页面。代码示例： ``` // main.js import router from './router' router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requiresAuth)) { // 需要鉴权的页面 if (!isAuthenticated()) { // 判断用户是否已经登录 next('/login') // 重定向到登录页面 } else { next() // 放行 } } else { next() // 不需要鉴权的页面直接放行 } }) ``` 2. HTML5 History模式：Vue Router默认使用的是hash模式，即路由路径前面会加上"#/"，这样可以避免通过地址栏直接访问页面的问题。如果想要进一步防止地址栏直接输入访问，可以使用HTML5 History模式，它会将路由路径以HTML5的history.pushState API进行管理，没有"#/"号。在router.js中进行配置： ``` // router.js const router = new VueRouter({ mode: 'history', // 开启history模式 routes: [...] }) ``` 需要注意的是，使用HTML5 History模式时需要后端进行配置，确保在后端路由匹配失败时返回同一个页面，以防止直接访问被拦截。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值