Level 4
Okay, I've managed to get the vue routing to work, however now I have a problem with calling the api routes, since it appears that the api routes must be checked after the web routes because api calls are no longer working after I have placed the vue_capture route at the end of the web routes file. (When I remove the vue_capture route, api calls work but then of course vue-router does not).
How can I ensure that vue handles routes only after all other Laravel routes have been checked including api routes?
My app.js file looks like this:
require('spark-bootstrap');
require('./components/bootstrap');
import Example from './components/Example.vue';
import Foo from './components/Foo.vue';
import Bar from './components/Bar.vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
base: __dirname,
routes: [
{ path: '/', component: Example },
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
});
var app = new Vue({
mixins: [require('spark')],
router,
components : {
Example, Foo, Bar
},
data : {
}
});
and web.php file looks like this:
Route::get('/', 'WelcomeController@show');
Route::get('/home', 'HomeController@show');
// vue-router will handle any other requests
Route::get('/{vue_capture?}', function () {
return view('welcome');
})->where('vue_capture', '[\/\w\.-]*')->middleware('auth');
and api.php routes file like this:
Route::group([
'middleware' => 'auth:api'
], function () {
Route::get('/tasks', function(){
return \App\Task::all();
});
});
