Nuxt.js: History path lost on Safari while using router.base on nuxt.config.js

Created on 19 Jan 2018 · 19Comments · Source: nuxt/nuxt.js

Here are steps and requirements to reproduce:

Any iOS device, tested on iOS11/10/9
Nuxt 1.1.1

Install nuxt-starter-kit template
Add router configure in to nuxt.config.js ↓

router: {
  base: '/abc'
}

Create a.vue in pages directory, add <nuxt-link to="/b">To Page B</nuxt-link> in template
Create b.vue in pages directory, add any text into template
Open "http://you-host:your-port/abc/a"
Press "To Page B" button, after page loaded, press the back button

Actual result: It return to "http://your-host:your-port/abc"
Excepted result: Should return to last page "http://your-host:your-port/abc/a"

_{This question is available on Nuxt.js community (#c2293)}

documentation

Source

AvailCat

😄2 👍2

Most helpful comment

@pi0 Yes, I have the same problem. It is caused by base: '/tools/', it will write <base href="/tools/"> in <head>.

This problem is found in the IOS system.

When history.back() it will go to /tools/.

My site is https://article.cekid.com/tools/1.

Click the first tab to https://article.cekid.com/tools/1/1.

Then click your back button, it will go to https://article.cekid.com/tools/.

zhouyu1993 on 6 Feb 2018

👍4 😕1

All 19 comments

I met the same problem, wish for the solution urgently;
In addition, in some android webviews(like huawei P10 own browser), If you input "http://you-host:your-port/abc/a" in the address bar, the final address will be "http://you-host:your-port/abc/" after a few seconds.
If someone met the similar problems and have had some ideas, please leave a message here

llpw4 on 26 Jan 2018

Router base is incorrect. It should ends with a slash:
base: '/abc/'

pi0 on 26 Jan 2018

@pi0 I have two nuxt.js project with different configure, another one using base: '/' with same problem, it works in old release or other Chromium based browser.

AvailCat on 27 Jan 2018

👍1

node_modulesnuxtlibapprouter.js, in this file, find "createRouter" function, delete "scrollBehavior ," , and restart, and then the problem is resolved.

llpw4 on 31 Jan 2018

👍2

@pi0 Yes, I have the same problem. It is caused by base: '/tools/', it will write <base href="/tools/"> in <head>.

This problem is found in the IOS system.

When history.back() it will go to /tools/.

My site is https://article.cekid.com/tools/1.

Click the first tab to https://article.cekid.com/tools/1/1.

Then click your back button, it will go to https://article.cekid.com/tools/.

zhouyu1993 on 6 Feb 2018

👍4 😕1

@llpw4 Thanks. It works for me. I want to know the reason.

LDQ-first on 23 Mar 2018

I meet the same problem. Did you solve it?

ZooTopiaGG on 24 May 2018

@ZooTopiaGG Just try to delete <base href="xxxx"> in index.html after npm run build.

zhouyu1993 on 25 May 2018

I met the same problem, wish for the solution urgently;

htfire on 6 Jun 2018

I have same problem.
Is it difficult to behavior in a subdirectory? (or I shuold be give up "Browser Back" on Safari)

y-tsuno on 8 Jun 2018

I come out a workaround
manually add a replaceState in mounted lifecycle

       mounted(){
            // 解决ios丢失上一级url问题
            window.history.replaceState(null, null, `${this.$router.options.base}${this.$route.fullPath}`.replace(/\/\//g, '/'));
        }

this works fo me