Question

我正在将framework7与vuejs一起使用，即framework7-vue。一切都很好。在为浏览器进行路由时，我使用了pushState =“ true”和pushStateSeperator =“”，这删除了“＃！”从网址栏输入，但是问题是当我访问网址时，说localhost：8080 / about会给我一个错误，无法获取/ about。

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

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

我希望我的链接像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是此处的键，其默认值为#!/

Answer 2

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

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

如何从Framework7-Vue中的网址栏中删除＃

2 个答案: