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

Question

我目前有一个使用 Vuejs VueRouter 和 Laravel 的 SPA。我试图做的是让用户的体验尽可能流畅。我定义了 laravel 路由以及 vue 路由。我目前面临的问题是，当我设置模式：历史记录然后刷新页面时。它将数据显示为 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
}
]
}

这是我的拉拉维尔路线

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

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

这是应用程序.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 组件，而不是该方法从后端返回的内容

Answer 1

在应用程序中尝试一下.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
});

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