Laravel 与 vue 的路由器混用该如何配置

前端同事用vue 做了一个项目,其中使用了 vue-router,文件结构如下图

![文件上传中...]()

前端的同事直接给了我这么一个文件夹,
vue项目单独全部用一个文件夹存放
然后我的项目打算用laravel 写
请教我该如何配置我的laravel, 让我的laravel 前端部分使用 vue 的路由,然后laravel 只是提供接口(json),,

《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 3
  1. 前后端分开部署
  2. 把前端放到 public/vue-app 中, 在 Nginx 中配置
    # Vue 路由
    location /vue-app/ {
    try_files $uri $uri/ /vue-app/index.html;
    }
    # Laravel
    location / {
    try_files $uri $uri/ /index.php$is_args$args;
    }
  3. 这样返回用了 Vue 的模板,,,不推荐这种,,,
    Route::get('vue-app/{path}', function () {
    return view('path.to.vue');
    })->where('path', '.*');
5年前 评论
largezhou (作者) 5年前
ivanzhang528 (楼主) 5年前
largezhou (作者) 5年前

哈哈,正好解决了这个问题,我来回答一下,首先单页面vue-router跳转,他只是监听路由,并不会直接跳转。vue-router的路由是不会通过laravel的路由的,那么我们设置一下web.php

Route::any('{all}','WebController@index')->where(['all'=>'.*']);

这样我们就通过一句代码转发了所有的url给vue-router去处理的

然后我们再将api的路由写在api.php里面

5年前 评论
Hachiko 5年前

不出意外的话,前端给文件夹里面应该有个 ***.html 文件,把文件拷贝到 public 目录下,这里以 public/spa/index.html 举例
路由定义 :

Route::get(/spa/','SpaController@index')

控制器定义 :

public function index() {
    $url = config('app.url');
    // do something
    return redirect($url . '/spa/index.html#/dashboard');
}

说明

5年前 评论
爱吃藤藤菜 5年前
Hachiko (作者) 5年前

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!