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