V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
allisone
V2EX  ›  Vue.js

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

  •  1
     
  •   allisone · 2021-04-02 15:07:38 +08:00 · 2288 次点击
    这是一个创建于 1312 天前的主题,其中的信息可能已经有所发展或是发生改变。

    情况是这样的,一个后台管理系统,左侧是菜单项可点击的一级和二级菜单,右侧则是一个点击菜单项会展现内容,现在我点击其中某个菜单,右边则会正常出现内容为用户列表,页面路径是 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
        1
    duan602728596  
       2021-04-02 15:11:08 +08:00
    单页应用,需要把所有的路由请求都返回 index
    allisone
        2
    allisone  
    OP
       2021-04-02 15:13:57 +08:00
    @duan602728596 老哥我不懂啊。。。。能说详细点不,我这是首次发帖
    wgbx
        3
    wgbx  
       2021-04-02 15:16:09 +08:00
    History 和 Hash 问题,让 index 来处理
    zzk1989
        5
    zzk1989  
       2021-04-02 15:17:46 +08:00
    不懂 nginx 的话就去掉路由的 mode 吧,用默认的 hash 模式
    地址会变成 http://localhost:8080/#/admin/user
    ``` js
    new Router({
    // mode: "history",
    ```
    allisone
        6
    allisone  
    OP
       2021-04-02 15:23:28 +08:00
    @zzk1989 目前还只是本地 dev 模式下运行的。没用 nginx 的,这个更改为 hash 的确可以解决这个问题。。。但是 history 就不行,,就是很奇怪
    duan602728596
        7
    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
        8
    vivipure  
       2021-04-02 15:58:17 +08:00
    本地开发时 配置 devServer https://webpack.js.org/configuration/dev-server/#devserverhistoryapifallback
    部署时就配置 nginx
    allisone
        9
    allisone  
    OP
       2021-04-02 16:12:02 +08:00
    @duan602728596 感谢老哥解答,你说的我好像听懂了,但是实在是不知道问题出在哪儿了,,这个 /admin/user 算是 /admin 请求的子路由。请问如何把请求的路由都返回 index.html
    onlyhy
        10
    onlyhy  
       2021-04-02 17:57:50 +08:00
    用 hash 模式,如果用 history 模式: https://router.vuejs.org/zh/guide/essentials/history-mode.html
    cw2k13as
        11
    cw2k13as  
       2021-04-02 17:59:52 +08:00
    重定向问题???,搞不定就换 Hash 模式吧,官方文档写的明明白白,仔细看吧
    sgiyy
        12
    sgiyy  
       2021-04-02 18:01:01 +08:00
    后台应用,history 模式的必要性不大啊,体验都一样,建议直接 hash 模式,不然你还需要服务器配置下,非要坚持的话,参考前面几位的意见。
    allisone
        13
    allisone  
    OP
       2021-04-02 18:58:52 +08:00
    @sgiyy
    @cw2k13as
    @onlyhy
    感谢三位老哥的建议,问题已经解决了,虽然我自己也没弄清楚为啥是这么解决的。
    Arrowing
        14
    Arrowing  
       2021-04-03 11:15:56 +08:00 via Android
    用 hash 是因为 hash 值更改本质上页面没变动,通过异步加载内容来更新网页。
    history 也可以做到,但是对于服务器来说,不同的地址对应不同 html 文件,如果是单页面应用就找到文件了,所以要把所有访问指向那个入口 html 文件,如果服务器是 nginx,可以用 try_files 。
    Arrowing
        15
    Arrowing  
       2021-04-03 11:17:16 +08:00 via Android
    *如果是单页面应用就找不到文件了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5360 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 05:47 · PVG 13:47 · LAX 21:47 · JFK 00:47
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.