Question

我有一个具有注册/登录信息的登录页面，该页面重定向到包含内容的主页。成功登录后，我将这样重定向：

this.$router.push({ name: 'main' })

这可行，但是如果我刷新页面或尝试从http://testapp.test/main之类的URL访问它，我会收到错误消息：页面不存在404。目前，我对访问仅用于登录用户的页面没有任何保护，我还在路由器中为未定义的路由添加了“ *”路径，并且它仅抛出404而不是加载主页。这是我的路由器设置：

import Vue from 'vue'
import VueRouter from 'vue-router'
import BootstrapVue from 'bootstrap-vue'
import {store} from './store/store'

Vue.use(BootstrapVue);
Vue.use(VueRouter);

window.Vue = require('vue');


import Home from './components/LandingPage.vue'
import Main from './components/MainPage.vue'
import Logout from './components/Logout.vue'

const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home,
        },
        {
            path: '/main',
            name: 'main',
            component: Main,
        },
        {
            path: '/logout',
            name: 'logout',
            component: Logout,
        },
        {
            path :'*',
            name: 'home',
            component: Home,
        }
    ],
});


const app = new Vue({
    el: '#app',
    components: { Home, Main, Logout },
    router,
    store,
});

我尝试过https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations，但不确定是否做对了。我所做的是复制了用于Apache配置的代码，并用它替换了.htaccess中的现有代码。但是，即使从登录开始的路由也停止工作，并且如果我访问/ main，则会给我404错误。

Answer 1

我通过添加解决了

Route::get('/{vue_capture?}', function () { return view('welcome'); })->where('vue_capture', '[\/\w\.-]*');

进入web.php文件

Answer 2

为此，您还必须进行服务器端配置。作为替代，您可以尝试其他路由器模式吗？像“哈希”

这里是有关模式和服务器配置的文档。

https://router.vuejs.org/api/#mode

https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

Vue路由器页面刷新或URL访问

2 个答案: