如何将 laravel 和 Vue2 路由器混合在一起答案

【问题标题】：How to mix laravel and Vue2 router together如何将 laravel 和 Vue2 路由器混合在一起
【发布时间】：2017-11-13 23:24:13
【问题描述】：

所以在我的 laravel 应用中，我们有一个 url 说

http://mywebsite.in/wfengine/search/

现在我想使用 laravel 路由器来处理上面的链接，但似乎什么都没有发生。

Router.js

import VueRouter from 'vue-router';

let routes = [
    {
        path:'/filters',
        componenet: require('./views/filter')
    }
];


export default new VueRouter({

    routes
});

App.js

`import router from './routes';

// import './core/searchableCards';


var app = new Vue({

    el:'#ep_result_1',

    router

})`

HTML

<router-link to="/filters">Search Page</router-link>

现在在 laravel 加载的页面上，我在浏览器中得到以下网址

http://mywebsite.in/wfengine/search/#filters

但是模板没有加载，谁能帮我解决这个问题

据我所知，Vue 路由器只是在做一些 Dom 隐藏和显示，所以它不应该受到基本 url 的影响，对吧？

【问题讨论】：

Router.js 中路由中componenet 的拼写错误怎么办？

标签： vuejs2 laravel-5.4 vue-router

【解决方案1】：

Vue 路由器挂载组件（在 routes 数组中定义）。因此，如果您为（例如）search.blade.php 定义了到 wfengine/search/ 的 laravel 路由，则应该有 <router-view></router-view> dom 元素 as the doc says。

之后你应该定义 vue-router:

const router = new VueRouter({
  mode: 'history',
  routes
})

routes 变量是 routes 数组，mode 用于使用不带 # 的 vue 路由（http://mywebsite.in/wfengine/search/#filters -> http://mywebsite.in/wfengine/search/filters）。之后，您应该在 laravel 的网络路由中注册 url (wfengine/search/filters)，返回 search.blade.php 或包含 <router-view> dom 的“基本页面”。

所以 1. 应该有一个基本的 php 视图，其中包含 <router-view>。 2. 然后在服务器端注册 url，返回相同的基本视图。 3. 然后vue-router会在url的末尾决定加载哪个组件。

【讨论】：

【解决方案2】：

在您的routes/web.php 文件的末尾，只需输入以下代码。这个技巧对我有用。

// At the end of the file 

Route::get('/{vue_capture?}', function () {
    return view('welcome');
})->where('vue_capture', '[\/\w\.-]*');

当然，您必须将<router-view></router-view> 放入您的布局或刀片文件中。

【讨论】：