This time I use the official template to reproduce the error.
I use this template:
I changed three files:
- config/index.js
- src/pages/about
- 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:
- use http://localhost:8083/about/ for my entry point (type http://localhost:8083/about/ as url in chrome)
- click the “Form” link in about page
- click “Back” button (the navbar one. not the browser’s “previous page” button)
- 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>
