vue.js - 如何从framework7-vue中的网址栏中删除#

Question

我将framework7与vuejs一起使用，即framework7-vue。一切都运转良好。在为浏览器做路由时，我使用了pushState =“true”和pushStateSeperator =“”，这会删除“#!”从网址栏，但问题是当我访问网址时，比如说 localhost:8080/about 它给了我一个错误无法获取/about。

现在，如果我不将 pusStateSeperator 设置为“”，它会正常工作，网址将变成 http://localhost:8080/#!/about现在，当我直接从浏览器点击相同的网址时，页面加载不会出现错误。

所以任何解决方案如何删除“#!”并使链接有效？

我希望我的链接像这样 localhost:8000/about 一样工作，如果我重新加载它不应该给我错误“无法获取/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,
  },
];

app.js

// 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.vue

<template>
  <!-- App -->
  <f7-app :params="f7params">

    <!-- Statusbar -->
    <f7-statusbar></f7-statusbar>

    <!-- Left Panel -->
    <f7-panel left reveal>
      <f7-view url="/panel-left/"></f7-view>
    </f7-panel>

    <!-- Right Panel -->
    <f7-panel right cover theme-dark>
      <f7-view url="/panel-right/"></f7-view>
    </f7-panel>

    <!-- Main View -->
    <f7-view id="main-view" url="/" main ></f7-view>

    <!-- Popup -->
    <f7-popup id="popup">
      <f7-view>
        <f7-page>
          <f7-navbar title="Popup">
            <f7-nav-right>
              <f7-link popup-close>Close</f7-link>
            </f7-nav-right>
          </f7-navbar>
          <f7-block>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, architecto. Cupiditate laudantium rem nesciunt numquam, ipsam. Voluptates omnis, a inventore atque ratione aliquam. Omnis iusto nemo quos ullam obcaecati, quod.</f7-block>
        </f7-page>
      </f7-view>
    </f7-popup>

    <!-- Login Screen -->
    <f7-login-screen id="login-screen">
      <f7-view>
        <f7-page login-screen>
          <f7-login-screen-title>Login</f7-login-screen-title>
          <f7-list form>
            <f7-list-item>
              <f7-label>Username</f7-label>
              <f7-input name="username" placeholder="Username" type="text"></f7-input>
            </f7-list-item>
            <f7-list-item>
              <f7-label>Password</f7-label>
              <f7-input name="password" type="password" placeholder="Password"></f7-input>
            </f7-list-item>
          </f7-list>
          <f7-list>
            <f7-list-button title="Sign In" login-screen-close></f7-list-button>
            <f7-block-footer>
              <p>Click Sign In to close Login Screen</p>
            </f7-block-footer>
          </f7-list>
        </f7-page>
      </f7-view>
    </f7-login-screen>

  </f7-app>
</template>

<script>
// Import Routes
import router from './routes.js'

export default {
  data() {
    return {
      // Framework7 parameters here
      f7params: {
        id: 'io.framework7.testapp', // App bundle ID
        name: 'Framework7', // App name
        theme: 'auto', // Automatic theme detection
        // App routes
        routes: router,
        view:
            {
              pushState:"true",
            }
      },
    }
  }
}
</script>

The first link where #! is coming and things work fine even when i refresh page

Now this happens when i set pushStateSeperator="", now when u refresh the link you get this error.

Answer 1

不知道你是否已经找到解决办法了。对于其他正在寻找此内容的人:

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

<f7-view id="main-view" main url="/"
  :push-state="true"
  push-state-separator="/myapp"
></f7-view>

push-state-separator 是这里的键，默认值为 #!/