问题的来源
在开发完前端页面和一部分组件之后，我执行了npm run build和python manage.py runserver来启动后端服务器测试页面的表现。但是这时候出现了一个问题：从页面上直接点击链接可以正常跳转，但是刷新页面、输入url或者从审查元素里点击，就会出现404 Not Found的问题。
一开始一直不明白是为什么，在想了一天、掉了一大把头发之后终于明白了问题的本质并找到了解决方法。
问题分析
要想知道这个问题为什么会产生，首先还是应该搞明白单页面应用与Vue-router的本质：
什么是单页面应用（SPA）
单页面应用（Single Page Web Application）的本质其实就是一个外壳页面加上不同的页面组件（也就是构成页面本体的不同片段）。与传统的多页面应用（MPA，Multiple Page Web Application）每次跳转都是一次HTTP请求不同，单页面应用的页面跳转只是页面的局部刷新——使用JavaScript等操作DOM的工具将页面的一部分显示或者隐藏，达到“看起来像是页面跳转了”的效果。
例如，攻防世界这个CTF平台的本体（不包括题目）就是一个很典型的单页面应用（至于为什么你可以打开它，再打开审查元素，然后点击一个链接，观察一下页面元素的变化，你就明白了）。
因为单页面应用有这样的本质，所以在页面跳转的时候如果打开审查元素，不会看到在跳转的同时页面全部重新加载的现象，而只能看到页面发生了局部更新，如下图：
Vue-router的本质
Vue-router的本质其实就是使用Vue.js构建的单页面应用的路径管理器，再本质一点，就是建立url与整个单页面应用的不同组成部分的映射关系的模块。因为是单页面应用，所以<a>标签并不会起作用，这时候就需要vue-router这样的路径管理器来实现链接与页面跳转。
因为不是真正的像后端路由一样每切换一次url都重新发送请求，所以vue-router所形成url其实并不是真实存在的url，只是一个壳子而已（其实就是区分不同“页面”的，注意这里“页面”加了双引号）。
vue-router本来是使用“hash模式”（也就是url前面有个“#”，这个部分不改变页面就不会重新加载）的，但是为了美观和与我们以往的经验相同，可以使用“history模式”去掉这个“#”，这样我们看到的单页面应用的url就和多页面应用的url相差无几了。
重新分析问题的本质
明白了单页面应用和vue-router的本质之后，再看这个问题就没有那么困难了。
正因为没有使用“hash模式”，所以url跟正常的多页面应用的url一模一样。当输入url、刷新页面时这个虚假的url也会被后端解析，但它的本质只是与页面不同组成部分之间的映射关系，所以肯定是不可能真正存在于服务器上的，被后端解析之后，返回404 Not Found也就不是奇怪的事情了。
问题的解决方法
既然知道问题出在哪了，就很容易想到解决方法——配置后端时，除了接口之外，无论我们请求什么，都返回原来的index.html就可以了。这个在Django中也不难实现，用re_path()函数做一个正则匹配就可以了：
urls.py(未完成)
from django.contrib import admin
from django.urls import path, re_path
from django.views.generic import TemplateView
from backend.views import Login # 还没写完的登录接口，不用管它
urlpatterns = [
path('admin/', admin.site.urls),
path('', TemplateView.as_view(template_name='index.html')),
path('login/check/', Login.as_view(), name='login-check'), # 还没写完的登录接口
re_path(r'.*', TemplateView.as_view(template_name='index.html'))
]
这样做又会引来新的问题：无论我们访问什么都不返回404了。
这个问题也不难解决，开发一个专门的404组件，并且在vue-router里配置一下：在配置完所有的url之后，配置上这个404组件。
NotFound.vue
<!--
404 Not Found
-->
<template>
<div>
<v-navbar></v-navbar>
<v-header></v-header>
<div class="container">
<h1 class="display-3">404 Not Found</h1>
</div>
</div>
</template>
<script>
import NavBar from './NavBar'
import Header from './Header'
export default {
name: 'NotFound',
components: {
'v-navbar': NavBar,
'v-header': Header
}
}
</script>
<style scoped>
h1 {
text-align: center;
}
</style>
配置这个404组件，注意看routers的最后一部分：
index.js(未完成？)
import Vue from 'vue'
import Router from 'vue-router'
import Manage from '@/components/Manage'
import Main from '@/components/Main'
import Login from '@/components/Login'
import Archive from '@/components/Archive'
import ArticleDetail from '@/components/ArticleDetail'
import Add from '@/components/Add'
import Delete from '@/components/Delete'
import Logout from '@/components/Logout'
import NotFound from '@/components/NotFound'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Main',
component: Main
},
{
path: '/manage',
name: 'Manage',
component: Manage
},
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/archive',
name: 'Archive',
component: Archive
},
{
path: '/article/:id',
name: 'Article',
component: ArticleDetail
},
{
path: '/add',
name: 'Add',
component: Add
},
{
path: '/delete/:id',
name: 'Delete',
component: Delete
},
{
path: '/logout',
name: 'Logout',
component: Logout
},
{
path: '*',
name: 'NotFound',
component: NotFound
}
]
})
这样，当我们访问不存在的url时，就会返回这个404页面，而访问存在的url时，页面回显正常：
这样，这个问题就完美地解决了。
