Question

我已按照tutorial关于如何将Vue集成到Symfony（3.3）中，并且它的工作正常。

我想在HTML5历史模式中使用vue-router，所以使用＆＃34; real＆＃34;网址而不是哈希。问题是虽然在最初加载索引页面时效果很好，但是它打不开具有symfony不知道的Vue URL的页面，导致symfony会抛出404错误而不加载使用Vue应用程序的索引视图。

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

我认为我要么必须改变.htaccess（目前正在使用确切的one that came with the symfony installation），要么以某种方式＆＃34; catch＆＃34;路由symfony不知道并重定向到索引页面 - 但是我已经卡在这里，因为我想要在少数路由前缀范围内找不到的路由我想让symfony用来抛出404错误。

Answer 1

对于那些喜欢使用注解的人[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 和source code，以获取逐步的设置。

已通过Symfony 3.x，4.x，VueJS 2.5.x，VueRouter 3.x进行了测试

Answer 2

有同样的问题。 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

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

2 个答案:

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