如何使 vue-router 模式历史记录与 laravel 路由一起使用答案

【问题标题】：How to make vue-router mode history work with laravel routes如何使 vue-router 模式历史记录与 laravel 路由一起使用
【发布时间】：2020-01-19 08:27:35
【问题描述】：

我目前有一个使用 Vuejs VueRouter 和 Laravel 的 SPA。我想做的是让用户的体验尽可能流畅。我定义了 laravel 路由和 vue 路由。我目前面临的问题是，当我设置 mode: history 然后刷新页面时。它将数据显示为 json。

假设我到达了这个端点：

本地主机：8080/用户

页面将按预期显示（本例中为 Vue 组件）

但是如果我刷新页面，它会显示：

user {

name: "test",
id: "1"

}

这是我的vue路线

import User from './components/user/User';

export default {
    mode: 'history',

    routes: [
        {
            path: '/user',
            name: 'user',
            component: User
        }
    ]
}

这是我拥有的 laravel 路线


Route::get('user', 'UserController@index');


Route::get('/{any}', 'AppController@index')->where('any', '.*');

这是 app.js


import Vue from 'vue';
import VueRouter from 'vue-router';
import routes from './routes';
import App from './components/App';

Vue.use(VueRouter);

require('./bootstrap');

window.Vue = require('vue');

let app = new Vue({
    el: '#app',
    components: {
        App
    },
    router: new VueRouter(routes)
});

如何在页面刷新时仍然显示 vue 组件，而不是方法从后端返回的内容

【问题讨论】：

能否添加屏幕短app.js文件？
刚刚更新了
如果你的 laravel 和 vue 路由冲突，这是不可能的。
@Viney 不可能？那么 vue-router 和 laravel 是如何协同工作的呢？有人如何使用两者来构建 SPA

标签： php laravel laravel-5 vuejs2 vue-router

【解决方案1】：

在 app.js 中试试这个

import VueRouter from 'vue-router'
Vue.use(VueRouter)
let routes = [
     { path: '/Users', component: require('./components/Users.vue').default},
]
const router = new VueRouter({
   mode: 'history',
   routes
 })

如果您需要添加组件，只需创建它，然后像这样引用它并且不要忘记像这样在#app上引用路由器

const app = new Vue({
     el: '#app',
     router
});

最后检查控制台是否有其他错误

【讨论】：

我在我的问题中添加了我的 app.js
试试这些然后告诉我