zoukankan      html  css  js  c++  java
  • Laravel+vue实现history模式URL可行方案

    项目:laravel + vue 实现前后端分离。
    vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。

    没有特别的要求的话,hash模式亦正常访问。好嘛,产品要求URL要像正常那样的 —— history模式的。看看vue文档,要实现vue history模式也很简单。vue 切换一下模式,本地测试ok啦。
    接下来,看到还需要后台配置支持:

    因为VUE应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了。所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。

    So,Nginx配置一下:

    
    location / {
      try_files $uri $uri/ /index.html;
    }
    

    没错,部署前端资源Nginx服务器上,简单加上一条通用匹配规则。
    至此,vue 前端搞定了,但是。。。还是不行的!
    原因是从前端服务器访问是正常了,但是域名指向的是后端服务器,所以当vue router history模式url直接访问时还是会404.
    当到这里,又回头排查一下是不是前面哪里搞错了,仔细看下来,没问题啊,完全按vue文档说明操作啦。
    想一阵子,才找到思路:404是后端报出的,也就说Laravel给出的,laravel router 压根就没前端定义的路由。所以,当即一拍脑子,就想到是不是将laravel 异常处理在response出去前给中断一下,将404处理交给前端再处理一下,那么也只是需要在app/Exceptions/Handlerrender方法加下判断:

    
    /**
         * Render an exception into an HTTP response.
         *
         * @param  IlluminateHttpRequest  $request
         * @param  Exception  $exception
         * @return IlluminateHttpResponse
         */
        public function render($request, Exception $exception)
        {
            // 解决vue history 地址丢失问题
            if($exception instanceof SymfonyComponentHttpKernelExceptionNotFoundHttpException)
            {
                if ($exception->getStatusCode() == 404) {
                    return response()->view('welcome');
                }
            }
            return parent::render($request, $exception);
        }
    
    

    解释一下:welcome 就是加载了vue CSS和JS,也就是vue依赖文件。
    以上搞定前后端分离,vue history 404 问题!

    原文地址:https://segmentfault.com/a/1190000016928656

  • 相关阅读:
    七言丨做个俗人,浪荡一生,干净自由。
    当你无法原谅父母时,那就不要原谅
    node_modules干什么的?
    流的操作(一)视频转音频引发的血案
    OpenGL ES 压缩纹理
    用 .SqlSugar ORM 来实现报表功能 .NET CORE /.NET
    Opencv 播放mp4文件和读取摄像头图以及可能会发生的一些异常问题解决方法
    Vue 前端权限控制的优化改进版
    输入框占位符placeholder
    为DOM节点添加或者删除class
  • 原文地址:https://www.cnblogs.com/lalalagq/p/9962100.html
Copyright © 2011-2022 走看看