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

Question

我已经按照 tutorial 如何将 Vue 集成到 Symfony (3.3) 中学习了，它工作得很好。

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

我只想将 symfony 用于特定的路由前缀，例如 /blog、/api，并且对于所有其他路由加载索引路由，它除了加载 vue 应用程序外什么都不做，但我不真不知从何下手。

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

Answer 1

有同样的问题。 Symfony 同时提供一个 Vue 驱动的前端并实现一个 Rest-API。我使用某种 PageNotFound-Fallback 解决了它，所以基本上每条没有被 Symfony 路由器找到的路由都会 forwarded/redirected 到前端。所以 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 中增加了一个配置（参见：）

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

Answer 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 页面 通过 通配符 如下所示，

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 and the source code 以了解分步设置。

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

进行测试

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

How to configure symfony to work with Vue.js in HTML5 History mode

php

.htaccess

symfony

vue.js

vue-router

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