vue-router 与 laravel 路由结合

Posted 2023-02-22

【中文标题】vue-router 与 laravel 路由结合

【英文标题】：vue-router in conjunction with laravel routes

【发布时间】：2017-02-04 10:12:41

【问题描述】：

我已经成功设置了 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 的唯一方法是手动输入 url。

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

【参考方案1】：

您真的不应该将两者一起用于前端导航，除非您有合乎逻辑的理由。 Vue 路由器适用于单页应用程序，而 Laravel 的路由系统适用于多页应用程序或 API。我认为最常见的设置是让所有 Laravel 路由，除了 /api/ 重定向到包含您的 SPA 的单个模板，比如 app.blade.php。从那里您的 vue-router 将成为您的前端导航，而您的 /api/ 端点将成为您将数据输入和输出 laravel 的方式。

【讨论】：

我需要同时使用两者，因为我仍在将刀片页面转换为 vue。所以在这种情况下，并不是所有的页面都会是 vue 驱动的

你真的不应该这样做，但是如果你需要我建议不要使用 v-link 你仍然需要链接到 laravel 生成的页面。

【参考方案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'
);