Как удалить # из строки URL в framework7-vue - PullRequest
Новая
       21

Как удалить # из строки URL в framework7-vue

0 голосов
/ 06 января 2019

Я использую framework7 с vuejs, т.е. framework7-vue. Все работает хорошо. При выполнении маршрутов для браузера я использовал pushState = "true" и pushStateSeperator = "", это удаляет "#!" из строки URL, но проблема в том, что когда я захожу на эту ссылку, скажем, что localhost: 8080 / об этом выдает ошибку, не могу получить /about.

Теперь, если я не установлю pusStateSeperator на "", он будет работать нормально, URL-адрес превратится в http://localhost:8080/#!/about, и теперь, когда я нажимаю на тот же URL-адрес из браузера, страница загружается без ошибок.

Так что любое решение, как убрать "#!" и заставить ссылки работать?

Я хочу, чтобы моя ссылка работала так: localhost: 8000 / about, и если я перезагружаю ее, она не должна выдавать ошибку "Cannot get / 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>

Первая ссылка, где #! идет, и все работает хорошо, даже когда я обновляю страницу

Теперь это происходит, когда я устанавливаю pushStateSeperator = "", теперь, когда вы обновляете ссылку, вы получаете эту ошибку.

Ответы [ 2 ]

0 голосов
/ 24 апреля 2019

Я не знаю, нашли ли вы решение уже. Для тех, кто ищет это:

, если ваше приложение лежит на https://example.com/myapp

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

push-state-separator - это ключ, значение по умолчанию которого равно #!/

0 голосов
/ 06 января 2019

Попробуйте указать для режима маршрутизатора значение «history»; 

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