Question

我已经成功设置了vue-router，但是我在使用laravel 5.3路由时遇到了一些问题。

我有一个家庭的PHP路线：

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

我已经设置了vue-router路由：

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

'*': {
    component: PageNotFound
}

在我的web.php路由文件中，我有以下内容：

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

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

我的问题是当我改变路由的顺序（在归属路由器之前的vue-router）并且我尝试访问home路由时，呈现Page not found vue-route并且可以通过user-feed使用v-link。

当vue-router位于home路由之后，主页会正常呈现，但vue-router无法通过v-link访问，而我可以访问vue-router的唯一方法是手动输入网址。

如何将vue-router与laravel route一起使用？

Answer 1

除非你有合理的理由，否则你真的不应该将两者一起用于前端导航。 Vue路由器适用于单页面应用程序，Laravel的路由系统适用于多页面应用程序或API。我认为最常见的设置是将所有Laravel路线除了说/api/重定向到包含SPA的单个模板，比如说app.blade.php。从那里你的vue-router将是你的前端导航，你的/api/端点将是你如何获得进出laravel的数据。

Answer 2

试试这可能会解决您的问题

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

vue-router与laravel路由一起使用

2 个答案: