Vue-Router页面刷新跳转异常求助：刷新后自动跳转到首页

你使用了Vue Router的history模式，前端页面跳转是客户端行为，不会触发服务器请求。但刷新页面时，浏览器会直接向Flask服务器发起当前URL的请求（比如/edit/my_shedule），如果Flask后端没有配置匹配这类路径的路由，服务器就会返回默认的/index页面（或触发现有重定向逻辑跳转到index）。

1. 给Flask添加兜底路由 #

让所有未匹配到API接口的请求，都返回Vue的入口HTML文件，交由Vue Router接管前端路由。示例代码：

from flask import Flask, render_template

# 假设Vue打包后的文件放在dist目录下
app = Flask(__name__, static_folder='dist/static', template_folder='dist')

# 兜底路由：捕获所有未匹配的路径
@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def serve_vue_app(path):
    return render_template('index.html')

# 保留你的其他API路由
@app.route('/api/get-content/<filename>')
def get_content(filename):
    # 编写你的API逻辑
    return {"status": "success", "data": filename}

2. 确认Vue的publicPath配置 #

如果Flask应用部署在根路径，Vue项目的vue.config.js需保证publicPath为/：

module.exports = {
  publicPath: '/'
}

若部署在子路径（比如http://your-domain/app/），则将publicPath改为'/app/'。

3. 可选：优化Vue Router配置 #

你的路由配置本身无错误，可给动态路由添加name，方便后续编程式导航：

{
    path: '/edit/:filename',
    name: 'EditTable',
    component: TablePage,
}

配置完成后，刷新/edit/my_shedule页面时，Flask会返回Vue的入口文件，Vue Router会自动解析URL并渲染对应的TablePage组件，不会再跳转到index页面。

内容的提问来源于stack exchange，提问作者William Harker