有没有大佬，关于 vue 父子路由一个很奇怪的问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› Vue.js

这是一个创建于 1336 天前的主题，其中的信息可能已经有所发展或是发生改变。

情况是这样的，一个后台管理系统，左侧是菜单项可点击的一级和二级菜单，右侧则是一个点击菜单项会展现内容，现在我点击其中某个菜单，右边则会正常出现内容为用户列表，页面路径是 http://localhost:8080/admin/user，可是当我刷新该页面，页面就显示 Cannot GET /admin/user 。。。有没得大佬熟悉的。。。

第 1 条附言 · 2021-04-02 17:17:15 +08:00

关于这个问题我可能有点眉目了，想问一下：

const rewrites = {
  rewrites: [{
    from: '/admin/', // 正则或者字符串
    to: '/admin/index.html', // 字符串或者函数
  }]
}
const historyMiddleware = require('connect-history-api-fallback')(rewrites);

这个里面的from和to是填什么方面的内容

父子路

点击菜

单项

大佬

15 条回复 • 2021-04-03 11:17:16 +08:00

duan602728596

2021-04-02 15:11:08 +08:00

单页应用，需要把所有的路由请求都返回 index

allisone

2021-04-02 15:13:57 +08:00

@duan602728596 老哥我不懂啊。。。。能说详细点不，我这是首次发帖

wgbx

2021-04-02 15:16:09 +08:00

History 和 Hash 问题，让 index 来处理

hackyuan

2021-04-02 15:17:44 +08:00

https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90

zzk1989

2021-04-02 15:17:46 +08:00

不懂 nginx 的话就去掉路由的 mode 吧,用默认的 hash 模式
地址会变成 http://localhost:8080/#/admin/user
``` js
new Router({
// mode: "history",
```

allisone

2021-04-02 15:23:28 +08:00

@zzk1989 目前还只是本地 dev 模式下运行的。没用 nginx 的，这个更改为 hash 的确可以解决这个问题。。。但是 history 就不行，，就是很奇怪

duan602728596

2021-04-02 15:57:30 +08:00

http 请求和响应，正常来说的话，比如请求的路由是 /index.html 、/a.css ，会在目录下面寻找相应的文件；或者 /a/b/c，服务器解析后返回相应的信息。

单页应用切换路由，不会再去请求，所以本地切换是正常的。你请求"/"，返回 index.html 。但是刷新后，重新请求"/admin/user"，你的服务没有对这个路由进行处理，所以返回 404 。

所以你需要把请求的路由，都返回 index.html 的内容。这样无论你请求的是 /a 、/a/b/c/d，都会返回 index.html 的文档内容，然后 react 或 vue 根据当前的路由渲染内容。

vivipure

2021-04-02 15:58:17 +08:00

本地开发时配置 devServer https://webpack.js.org/configuration/dev-server/#devserverhistoryapifallback
部署时就配置 nginx

allisone

2021-04-02 16:12:02 +08:00

@duan602728596 感谢老哥解答，你说的我好像听懂了，但是实在是不知道问题出在哪儿了，，这个 /admin/user 算是 /admin 请求的子路由。请问如何把请求的路由都返回 index.html

onlyhy

2021-04-02 17:57:50 +08:00

用 hash 模式，如果用 history 模式： https://router.vuejs.org/zh/guide/essentials/history-mode.html

cw2k13as

2021-04-02 17:59:52 +08:00

重定向问题？？？，搞不定就换 Hash 模式吧，官方文档写的明明白白，仔细看吧

sgiyy

2021-04-02 18:01:01 +08:00

后台应用，history 模式的必要性不大啊，体验都一样，建议直接 hash 模式，不然你还需要服务器配置下，非要坚持的话，参考前面几位的意见。

allisone

2021-04-02 18:58:52 +08:00

@sgiyy
@cw2k13as
@onlyhy
感谢三位老哥的建议，问题已经解决了，虽然我自己也没弄清楚为啥是这么解决的。

Arrowing

2021-04-03 11:15:56 +08:00 via Android

用 hash 是因为 hash 值更改本质上页面没变动，通过异步加载内容来更新网页。
history 也可以做到，但是对于服务器来说，不同的地址对应不同 html 文件，如果是单页面应用就找到文件了，所以要把所有访问指向那个入口 html 文件，如果服务器是 nginx，可以用 try_files 。

Arrowing

2021-04-03 11:17:16 +08:00 via Android

*如果是单页面应用就找不到文件了