[V2] Framework7-Vue Back Link Goes Back to Index

There are three pages in this project: page1, page2, and page3.
The entry url is http://localhost:8081/page1
A link in page1 allows you to go to page2 once you click on it. (http://localhost:8081/page2)
If I click the back link from page2 it should go back to page1,
but it always jumps back to my index page (/) with url http://localhost:8081/page1 immediately after showing page1
The url is correct but the content is not.
However, if I click the “previous page” button in the browser, the error does not occur. (it will goes back to page1)

When it shows the index page, the structure looks like this:

problem

The page-current and page-previous are both Index page

How should I solve this?
Is there anyone who can help?

Show your js and main app vue component

This is the simple example I wrote that shows the problem.

main app vue:

main js:

This time I use the official template to reproduce the error.

I use this template:

I changed three files:

  1. config/index.js
  2. src/pages/about
  3. src/app.vue

In config/index.js, I modified line12 from

assetsPublicPath: '',

to

assetsPublicPath: '/',

In src/pages/about, I added the following line after line10:

<f7-link href="/form/">Form</f7-link>

In src/app.vue, I modified main-view to

<!-- Main View -->
<f7-view
  id="main-view"
  url="/"
  main
  :pushState="true"
  pushStateSeparator=""
  pushStateRoot="http://localhost:8083">
</f7-view>

step to reproduce the error:

  1. use http://localhost:8083/about/ for my entry point (type http://localhost:8083/about/ as url in chrome)
  2. click the “Form” link in about page
  3. click “Back” button (the navbar one. not the browser’s “previous page” button)
  4. the app instead of going back to about page, it went back to index (with correct url: localhost:8083/about)

The full code of all three pages:

config/index.js:

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-


    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map',

    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,

    cssSourceMap: true
  },

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../www/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../www'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '',

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

src/pages/about.vue:

<template>
  <f7-page>
    <f7-navbar title="About" back-link="Back"></f7-navbar>
    <f7-block-title>About My App</f7-block-title>
    <f7-block strong>
      <p>Here is About page!</p>
      <p>You can go <f7-link back>back</f7-link>.</p>
      <p>Mauris posuere sit amet metus id venenatis. Ut ante dolor, tempor nec commodo rutrum, varius at sem. Nullam ac nisi non neque ornare pretium. Nulla mauris mauris, consequat et elementum sit amet, egestas sed orci. In hac habitasse platea dictumst.</p>
      <p>Fusce eros lectus, accumsan eget mi vel, iaculis tincidunt felis. Nulla tincidunt pharetra sagittis. Fusce in felis eros. Nulla sit amet aliquam lorem, et gravida ipsum. Mauris consectetur nisl non sollicitudin tristique. Praesent vitae metus ac quam rhoncus mattis vel et nisi. Aenean aliquet, felis quis dignissim iaculis, lectus quam tincidunt ligula, et venenatis turpis risus sed lorem. Morbi eu metus elit. Ut vel diam dolor.</p>
    </f7-block>
    <f7-link href="/form/">Form</f7-link>
  </f7-page>
</template>

<script>
export default {}
</script>

src/app.vue:

<template>
  <!-- App -->
  <div id="app">

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

    <!-- Left Panel -->
    <f7-panel left reveal theme-dark>
      <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
      :pushState="true"
      pushStateSeparator=""
      pushStateRoot="http://localhost:8083">
    </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>

  </div>
</template>

<script>
export default {}
</script>

Did you try to update both F7 + F7-Vue to latest versions?

Yes, I have updated both of them to v2.2.0.

I’ve tested in chrome_mobile (android), chrome (mac), chrome (windows)
All of them show the same behavior.

The video below was chrome (mac)

Yeah, I this issue, trying to figure out where it comes from, could take some time

Thank you :slight_smile:

Should be fixed in 2.2.1 of F7-core

1 Like

This happen to me at version f7-core 6.0.21 also