Question

所以在我的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隐藏和显示所以它不应该受到基本网址的影响吗？

Answer 1

Vue路由器安装组件（在routes数组中定义）。因此，如果为（例如） search.blade.php 定义了 wfengine / search / 的laravel路由，则应该有<router-view></router-view> dom元素{{ 3}}

之后你应该定义vue-router：

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

routes变量是路由数组，模式是用于没有＃（as the doc says - ＆gt; http://mywebsite.in/wfengine/search/#filters）的vue路由。之后你应该在laravel的web路由中注册url（wfengine / search / filters），什么是回馈search.blade.php或者＃34; base page＆＃34;什么包含<router-view> dom。

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

Answer 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>放入布局或刀片文件中。

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

2 个答案: