使用laravel构建spa

最新推荐文章于 2023-01-10 14:11:53 发布

DragonWar%

最新推荐文章于 2023-01-10 14:11:53 发布

阅读量187

点赞数

文章标签： javascript php ViewUI

原文链接：https://my.oschina.net/cqqqqq/blog/1611736

版权

为什么80%的码农都做不了架构师？>>>

composer install
npm install
npm add vue-router --save

resources/assets文件夹下新建一个 routes.js ，引入所需的组件，并配置导航：

import Home from './components/Home.vue'
import About from './components/About.vue'

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]

export default routes

然后在 app.js 里添加路由代码：

import VueRouter from 'vue-router'

Vue.use(VueRouter)

import routes from './routes'
const router = new VueRouter({
  routes
})

/* eslint-disable no-new */
new Vue({
  router,
  el: '#app'
})

想让laravel支持spa需要配置路由

在 routes/web.php 的结尾处定义一个通用路由：

# Vue
Route::any('{all}', function () {
    return view('app');
})->where(['all' => '.*']);

还有一种组合定义路由的方式，可以传入一个数组参数，数组中包含的 url 都指向同一个 action。就像这样：

Route::combine([
    '/',
    'about'
], function () {
    return view('app');
});

在翻看 Illuminate\Routing\Router 源代码的时候，发现这货其实是可以使用宏的。唔，那就好办了。在 App\Providers\RouteServiceProvider 的 boot 方法添加宏定义：

public function boot()
{
        Route::macro('combine', function(array $uris, $action)
        {
                foreach ($uris as $uri) {
                        Route::any($uri, $action);
                }
        });
        parent::boot();
}

转载于:https://my.oschina.net/cqqqqq/blog/1611736