Vue.js vue路由器与laravel routes结合使用

我已成功安装vue路由器，但将其与我的laravel 5.3路由混合时遇到一些问题

我有一个回家的php路线：

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

我已经设置了vue路由器路由：

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

'*': {
    component: PageNotFound
}

在我的

web.php

route文件中，我有以下内容：

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

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

我这里的问题是，当我更改路由顺序（家庭路由器之前的vue路由器）并尝试访问

家庭

路由时，会呈现

未找到的页面

vue路由，并且

用户提要

可通过

v-link

使用

当vue路由器位于

主页

路由之后时，主页将正确呈现，但

vue路由器

无法通过

v-link

访问，我访问vue路由器的唯一方法是手动输入url

---

如何将

vue路由器

与我的

laravel路由

一起使用？

除非您有合理的理由，否则您确实不应该将两者一起用于前端导航。Vue路由器适用于单页应用程序，而Laravel的路由系统适用于多页应用程序或API。我认为最常见的设置是将除say

/api/

之外的所有Laravel路由重定向到包含SPA的单个模板，比如

app.blade.php

。从那里，您的vue路由器将成为您的前端导航，而您的

/api/

端点将成为您从laravel获取数据的方式。

试试这个方法，这可能会解决您的问题

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的过程中。因此，在这种情况下，并非所有页面都是vue驱动的，您确实不应该这样做，但是如果您需要，我建议您不要在仍然需要链接到laravel生成的页面的位置使用v-link。