Question

我正在使用laravel和vue.js创建静态站点。我做

Route::get('/', function () {
    return view('layouts.master');
});

此路线在此处输入代码以加载主页和

import VueRouter from 'vue-router'
import home from './components/home.vue'
import About from './components/About.vue'
import Contact from './components/Contact.vue'

Vue.use(VueRouter)

const routes = [

    { path: '/about', component: About },
    {
        path: '/',
        component: home
    },
    {
        path: '/contact',
        component: Contact
    }

]

const router = new VueRouter({
    mode: 'history',
    routes, // short for `routes: routes`,

})

它是我的appp.js代码。第一次在localhost：8000上加载页面时，主页工作正常，但是当我单击以添加其他路由并返回时它不起作用，则显示空白页面。但是我可以通过检查看到html页面。

Answer 1

听起来history mode在服务器端配置不正确。

作为测试， 更改此内容：

const router = new VueRouter({
    mode: 'history',
    routes, // short for `routes: routes`,

})

...对此：

const router = new VueRouter({
    //mode: 'history',
    routes, // short for `routes: routes`,

})

如果有效 ，这意味着您的服务器端未正确设置为Vue历史记录模式，因此您需要将服务器端配置为允许历史记录模式

Example 1
Example 2-向下滚动到“服务器端”部分的一半以上

Vue组件正在更新，但页面为空白。我可以通过检查页面

1 个答案: