vue-router in conjunction with laravel routes

问题:

I have setup vue-router successfully but I have some problem mixing it with my laravel 5.3 routes.

I have a php route for home:

Route::get('/', array('as' => 'home', 'uses' => 'HomeController@showWelcome'));

and I have setup vue-router routes:

'/user-feed': {
    name: 'user-feed',
    title: 'User Feed',
    component: Feed
},

'*': {
    component: PageNotFound
}

In my web.php route file, I have the following:

Route::get('/', array('as' => 'home', 'uses' => 'HomeController@showWelcome'));

// use vue-router route
Route::get('/{subs}', [function () {
    return view('layouts');
}])->where(['subs' => '.*']);

My problem here is when I change the order of the routes (vue-router before the home router) and I try to access the home route, the Page not found vue-route is rendered and the user-feed is available to be used through v-link.

When vue-router is after the home route, the home is rendered properly but vue-router is not accessible through v-link and the only way I can access the vue-router is by manually entering the url.

How can I use vue-router together with my laravel route?

回答1:

You really shouldn't be using the two together for front end navigation, unless you have a logical reason to. Vue router is intended for single page applications, and Laravel's routing system is intended for multi-page applications, or APIs. The most common set up I think would be to have all Laravel routes except for say /api/ redirect to a single template that includes your SPA, say app.blade.php. From there your vue-router will be your front end navigation and your /api/ endpoints will be how you get data in and out of laravel.

回答2:

try this this may solve your problem

export var router = new Router({
  hashbang: false,
  history: true,
  linkActiveClass: 'active',
  mode: 'html5'
});
router.map({
  '/': {
    name: 'home',
    component: Home
  },
  '/dashboard': {
    name: 'dashboard',
    component: Dashboard
  },
  '/404notfound': {
    name: 'pagenotfound',
    component: Pagenotfound
  }
});

// For every new route scroll to the top of the page
router.beforeEach(function() {  
  window.scrollTo(0, 0);
});

// If no route is matched redirect home
router.redirect({
  '*': '/404notfound'
});