router vue 动态改变url_Vue-router页面刷新或URL访问

我有一个登录页面，其中包含注册/登录，重定向到包含内容的主页面 . 成功登录后，我重定向如下：

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

这工作，但如果我刷新页面或尝试从URL访问它，例如http://testapp.test/main我得到错误：页面不存在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中的现有代码 . 但是，即使从登录路线停止工作，如果我访问/主要它给我404错误 .