donglvhe7591 2017-10-26 19:39
浏览 76
已采纳

如何配置symfony以在HTML5历史记录模式下使用Vue.js

I have followed the tutorial on how to integrate Vue into Symfony (3.3), and it's working just fine.

I'd like to however use vue-router in HTML5 History mode, so with "real" urls instead of hashes. The problem is while that works well when initially loading the index page, that it won't work to open a page with a Vue URL that symfony doesn't know, cause symfony will throw a 404 error and not load the index view with the Vue app.

I'd like to only use symfony for specific route prefixes, like /blog, /api, and for all other routes load the index route that does nothing but load the vue app, but I don't really know where to start.

I assume I either have to change the .htaccess (currently using the exact one that came with the symfony installation) or somehow "catch" routes symfony doesn't know and redirect to the index page - however I'm stuck here since I'd want routes that are not found within the range of the few route prefixes I want symfony to use to still throw a 404 error.

  • 写回答

2条回答 默认 最新

  • duan0531 2018-01-08 11:24
    关注

    Had the Same issue. Symfony is simultaneously delivering a Vue driven frontend and implementing an Rest-API. I solved it using some sort of PageNotFound-Fallback, so basically every route that was not found by the Symfony Router will be forwarded/redirected to the Frontend. So the FrontendController looks like this:

    class FrontendController extends Controller{
    
      public function indexAction(Request $request)
      {
        $base=$request->getBaseUrl();
        return $this->render('default/index.html.twig',['basePath'=>$base]);
      }
    
    
      public function pageNotFoundAction()
      {
        return $this->forward('AppBundle:Frontend:index');
      }
    }
    

    With an additional configuration in the routing.yml (see: Redirect with Event Listener for all "No route found 404 Not Found - NotFoundHttpException")

    pageNotFound:
    path: /{path}
    defaults: { _controller: AppBundle:Frontend:pageNotFound, path: '' }
    requirements:
        path: .*
    

    Finally, the VueRouter needs to be configured, so it keeps the correct environment, simply by adding the base Property in the Router constructor. If the frontend component is not displayed correctly, you can use router.push('some-route') to manually adjust it. Keep in mind that there will be no more 404 Errors, since they are all forwarded to the frontend, which can lead to bad scenarios using ajax on page load... Altough it feels like a hack, I hope this helps. Open for better solutions.

    EDIT Symfony version 3.4.3, Vue version 2.5.1

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥45 工程软件单片机设计课题要求
  • ¥15 在centos7安装conda
  • ¥15 c#调用yolo3 dll文件获取的数据对不上
  • ¥20 WPF 如何实现多语言,label 和cs(live Charts)中是否都能翻译
  • ¥15 STM32F103上电短路问题
  • ¥15 关于#单片机#的问题:以ATMEGA128或相近型号单片机为控制器设计直流电机调速的闭环控制系统(相关搜索:设计报告|软件设计|流程图)
  • ¥15 打开软件提示错误:failed to get wglChoosePixelFormatARB
  • ¥15 (标签-python|关键词-char)
  • ¥15 python+selenium,在新增时弹出了一个输入框
  • ¥15 苹果验机结果的api接口哪里有??单次调用1毛钱及以下。