Django+Vue 解决URL访问和刷新导致404的问题
问题分析
要想知道这个问题为什么会产生,首先还是应该搞明白单页面应用与Vue-router的本质:
什么是单页面应用(SPA)
单页面应用(Single Page Web Application)的本质其实就是一个外壳页面加上不同的页面组件(也就是构成页面本体的不同片段)。与传统的多页面应用(MPA,Multiple Page Web Application)每次跳转都是一次HTTP请求不同,单页面应用的页面跳转只是页面的局部刷新——使用JavaScript等操作DOM的工具将页面的一部分显示或者隐藏,达到“看起来像是页面跳转了”的效果。
vue-router本来是使用“hash模式”(也就是url前面有个“#”,这个部分不改变页面就不会重新加载)的,但是为了美观和与我们以往的经验相同,可以使用“history模式”去掉这个“#”,这样我们看到的单页面应用的url就和多页面应用的url相差无几了。
正因为没有使用“hash模式”,所以url跟正常的多页面应用的url一模一样。当输入url、刷新页面时这个虚假的url也会被后端解析,但它的本质只是与页面不同组成部分之间的映射关系,所以肯定是不可能真正存在于服务器上的,被后端解析之后,返回404 Not Found也就不是奇怪的事情了。
解决方法
配置后端时,除了接口之外,无论我们请求什么,都返回原来的index.html就可以
from django.contrib import admin
from django.urls import path, re_path
from django.views.generic import TemplateView
urlpatterns = [
path('admin/', admin.site.urls),
path('', TemplateView.as_view(template_name='index.html')),
re_path(r'.*', TemplateView.as_view(template_name='index.html'))
]
这样做又会引来新的问题:无论我们访问什么都不返回404了。
这个问题也不难解决,开发一个专门的404组件,并且在vue-router里配置一下:在配置完所有的url之后,配置上这个404组件。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhfgkbbi
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01