如何配置 symfony 以在 HTML5 History 模式下使用 Vue.js答案

【问题标题】：How to configure symfony to work with Vue.js in HTML5 History mode如何配置 symfony 以在 HTML5 History 模式下使用 Vue.js
【发布时间】：2018-04-08 07:37:56
【问题描述】：

我已经关注了tutorial，了解如何将 Vue 集成到 Symfony (3.3) 中，并且运行良好。

我想在 HTML5 历史模式下使用 vue-router，所以使用“真实”网址而不是哈希。问题是虽然在最初加载索引页面时效果很好，但无法打开带有 symfony 不知道的 Vue URL 的页面，因为 symfony 会抛出 404 错误并且不加载索引视图Vue 应用程序。

我只想将 symfony 用于特定的路由前缀，例如 /blog、/api，并为所有其他路由加载除了加载 vue 应用程序之外什么都不做的索引路由，但我真的不知道在哪里开始。

我假设我要么必须更改 .htaccess（当前使用确切的 one that came with the symfony installation），要么以某种方式“捕获”symfony 不知道的路由并重定向到索引页面 - 但是我被困在这里，因为我会想要在我希望 symfony 使用的少数路由前缀范围内找不到的路由仍然抛出 404 错误。

【问题讨论】：

标签： php .htaccess symfony vue.js vue-router

【解决方案1】：

有同样的问题。 Symfony 同时提供了一个 Vue 驱动的前端并实现了一个 Rest-API。我使用某种 PageNotFound-Fallback 解决了它，所以基本上每条 Symfony 路由器没有找到的路由都将被转发/重定向到前端。所以 FrontendController 看起来像这样：

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');
  }
}

在 routing.yml 中有额外的配置（见：Redirect with Event Listener for all "No route found 404 Not Found - NotFoundHttpException"）

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

最后，VueRouter需要配置，所以它保持正确的环境，只需在Router构造函数中添加base属性即可。如果前端组件显示不正确，可以使用router.push('some-route')手动调整。请记住，不会再有 404 错误，因为它们都被转发到前端，这可能会导致在页面加载时使用 ajax 的不良场景...... 虽然感觉像是一个黑客，但我希望这会有所帮助。开放以获得更好的解决方案。

编辑 Symfony 3.4.3 版，Vue 2.5.1 版

【讨论】：

【解决方案2】：

对于那些喜欢使用注释的人 [Symfony 3.x, 4.x]

您可以在 Symfony 中使用以下路由。

class DefaultController extends Controller
{
/**
 * @Route("/", name="homepage")
 * @Route("/{route}", name="vue_pages", requirements={"route"=".+"})
 */
    public function indexAction(Request $request)
    {
        return $this->render('default/index.html.twig', []);
    }
}

而在 VueJS 中，您可以通过 通配符 Vue-Router 为找不到的路由显示 404 页面 strong>如下图，

import '...'; // import required components
export default new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'homepage',
            component: home
        },
        {
            path: '/hello',
            name: 'hello',
            component: hello
        },
        {
            path: '*',           // wildcard
            name: 'notfound',
            component: notfound
        }
    ]
});

您可以查看此Reference tutorial 和source code 以了解分步设置。

使用 Symfony 3.x、4.x、VueJS 2.5.x、VueRouter 3.x 测试

【讨论】：