Vue.js 如何从framework7 vue中的url栏中删除#

我将framework7与vuejs一起使用，即framework7 vue。一切正常。在为浏览器执行路由时，我使用了pushState=“true”和pushStateSeperator=“”，这会从url栏中删除“#！”，但问题是当我访问url时，比如localhost:8080/about，它会给我一个无法获取/about的错误

现在，如果我不将pusStateSeperator设置为“”，它会工作得很好，url会转到，现在，当我直接从浏览器中点击相同的url时，页面将无错误地加载

那么，有什么解决方案可以删除“#！”并使链接正常工作呢

我希望我的链接像localhost:8000/about一样工作，如果我重新加载，它不会给我错误“cannotget/about”

routes.js

import HomePage from './pages/home.vue';
import AboutPage from './pages/about.vue';
import TermPage from './pages/terms.vue';


import FormPage from './pages/form.vue';
import DynamicRoutePage from './pages/dynamic-route.vue';
import NotFoundPage from './pages/not-found.vue';

import PanelLeftPage from './pages/panel-left.vue';
import PanelRightPage from './pages/panel-right.vue';

import ViewSchool from './pages/school/viewschool.vue'

export default [
  {
    path: '/',
    component: HomePage,
  },
  {
    path: '/panel-left/',
    component: PanelLeftPage,
  },
  {
    path: '/panel-right/',
    component: PanelRightPage,
  },
  {
    path: '/about',
    component: AboutPage,
  },
  {
    path: '/terms/',
    component: TermPage,
  },
  {
    path: '/form/',
    component: FormPage,
  },
  {
    path: '/dynamic-route/blog/:blogId/post/:postId/',
    component: DynamicRoutePage,
  },
  {
    path: '/viewschool/:school_id',
    component:ViewSchool,
    props:true,
  }, 
  {
    path: '(.*)',
    component: NotFoundPage,
  },
];

// Import Vue
import Vue from 'vue';

// Import F7
import Framework7 from 'framework7/framework7.esm.bundle.js';

// Import F7 Vue Plugin
import Framework7Vue from 'framework7-vue/framework7-vue.esm.bundle.js';

// Import F7 Styles
import Framework7Styles from 'framework7/css/framework7.css';

// Import Icons and App Custom Styles
import IconsStyles from './css/icons.css';
import AppStyles from './css/app.css';

// Import App Component
import App from './app.vue';


// Init F7 Vue Plugin
Framework7.use(Framework7Vue)

// Init App
new Vue({
  el: '#app',
    template: '<app/>',
  // Register App Component
  components: {
    app: App
  }
});

app.js

import HomePage from './pages/home.vue';
import AboutPage from './pages/about.vue';
import TermPage from './pages/terms.vue';


import FormPage from './pages/form.vue';
import DynamicRoutePage from './pages/dynamic-route.vue';
import NotFoundPage from './pages/not-found.vue';

import PanelLeftPage from './pages/panel-left.vue';
import PanelRightPage from './pages/panel-right.vue';

import ViewSchool from './pages/school/viewschool.vue'

export default [
  {
    path: '/',
    component: HomePage,
  },
  {
    path: '/panel-left/',
    component: PanelLeftPage,
  },
  {
    path: '/panel-right/',
    component: PanelRightPage,
  },
  {
    path: '/about',
    component: AboutPage,
  },
  {
    path: '/terms/',
    component: TermPage,
  },
  {
    path: '/form/',
    component: FormPage,
  },
  {
    path: '/dynamic-route/blog/:blogId/post/:postId/',
    component: DynamicRoutePage,
  },
  {
    path: '/viewschool/:school_id',
    component:ViewSchool,
    props:true,
  }, 
  {
    path: '(.*)',
    component: NotFoundPage,
  },
];

// Import Vue
import Vue from 'vue';

// Import F7
import Framework7 from 'framework7/framework7.esm.bundle.js';

// Import F7 Vue Plugin
import Framework7Vue from 'framework7-vue/framework7-vue.esm.bundle.js';

// Import F7 Styles
import Framework7Styles from 'framework7/css/framework7.css';

// Import Icons and App Custom Styles
import IconsStyles from './css/icons.css';
import AppStyles from './css/app.css';

// Import App Component
import App from './app.vue';


// Init F7 Vue Plugin
Framework7.use(Framework7Vue)

// Init App
new Vue({
  el: '#app',
    template: '<app/>',
  // Register App Component
  components: {
    app: App
  }
});

//导入Vue
从“Vue”导入Vue；
//导入F7
从“Framework7/Framework7.esm.bundle.js”导入Framework7；
//导入F7VUE插件
从“framework7 vue/framework7 vue.esm.bundle.js”导入Framework7Vue；
//导入F7样式
从“framework7/css/framework7.css”导入framework7样式；
//导入图标和应用程序自定义样式
从“./css/icons.css”导入IconsStyles；
从“./css/app.css”导入AppStyles；
//导入应用程序组件
从“/App.vue”导入应用程序；
//初始化F7VUE插件
框架7.使用（框架7Vue）
//初始化应用程序
新Vue({
el:“#应用程序”，
模板：'

尝试将路由器模式指定为“历史记录”

let router = new Router({
   mode: 'history',
   routes: [
       {
           name: 'About',
           path: '/about',
           component: About
       }
   ]
})

我不知道您是否已经找到了解决方案。对于其他正在寻找此解决方案的人：

如果您的应用位于
https://example.com/myapp



推送状态分隔符
是此处的键，其默认值为
#！/
如果您不使用完全由浏览器控制的基于散列的路由，您需要在Web服务器中具有一些逻辑，以便单页不仅可以正确地提供
/
而且可以正确地提供
/about
app@phoet先生，我试过这个没有w查看更新的代码和图像链接，因为它不起作用。我已经尝试过，但它是针对vuejs路由器的，我正在使用f7路由器如何设置它？推送状态很有用，但推送状态sparator对我的URL没有影响