Question

我目前拥有使用Vuejs VueRouter和Laravel的SPA。我想做的是使用户体验尽可能的流畅。我定义了laravel路线和vue路线。我当前面临的问题是，当我设置模式：历史记录，然后刷新页面。它将数据显示为json。

让我说我达到了这个终点：

localhost：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', '.*');

这是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组件，而不显示方法从后端返回的内容

Answer 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
});

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

如何使Vue-Router模式历史记录与Laravel路由一起使用

1 个答案: