Router Base Attribute does break hash links

[HannesOberreiter]

Version

@nuxt/content: 1.5.3
nuxt: 2.14.0

Reproduction Link

https://codesandbox.io/s/autumn-https-x3oxj?file=/nuxt.config.js

You need do change the demo browser window to the subfolder https://x3oxj.sse.codesandbox.io/test/

Steps to reproduce

Set base attribute inside nuxt.config.js

  router: {
    base: "/test"
  },

Go to the about page and click on the footnote. You will the URL changing to the hash but removing the current page about. This does also happening with the other types of hash routes on the same page, eg. headings or content links.

What is Expected?

Hash should be added to current page url.

What is actually happening?

Hash will remove the current Url and will be added to the base.

PS: On discord I made a video and gif of the problem, because I'm trying to deploy my nuxt-content page inside a subfolder.

Cheers
Hannes

[janpfischer]

Any Updates on this Topic? I have the same issue.

[atinux]

Hi there,

When using router.base, Nuxt adds a <base href="/test/">.

Sadly it looks like a known issue from the browser: https://rogerkeays.com/blog/using-base-href-with-anchors

You can use a Nuxt hook to remove the <base> tag, actually it fixes your issue but may introduces somes
issues (you will have to check to make sure your websites works perfectly without it):

// nuxt.config.js
export default {
  hooks: {
    "vue-renderer:ssr:templateParams": function (params) {
      params.HEAD = params.HEAD.replace('<base href="/test/">', "");
    }
  }
}

Working sandbox: https://codesandbox.io/s/green-meadow-tquyq?file=/nuxt.config.js:838-1027

[HannesOberreiter]

@atinux thanks that you looked into the issue and the workaround. It seems to work for me. I'm closing this issue as the problem is browser specific.

Don't know if it is a good idea to write a remark about this in the docs? en/guides/configuration-glossary/configuration-router.md

Cheers
Hannes

[janpfischer]

Nice, thank you! @atinux

For information: I noticed that this problem also affects the "on this site" anchor links on the right of a page. For e.g. in the docs Theme.
So maybe something some important than footnotes.
Nevertheless my browser could jump to the "broken" anchors at the "on this site" links, but not at footnotes. Links looks the same.

[HannesOberreiter]

@b1rdhous3 yes forgot to mention this, but it is happening for all hash links. eg. in docs theme if you click the headers or the links in the ToC.

[janpfischer]

So I found one Side Effect to @atinux suggestion:
If I try to link an image in a .md file within a subdirectory the image can not be found. It was expected at following location:
http://localhost:3000/basedir/subdir/OCR.png

To show the image I have to link it this way:

<img src="../OCR.png" />

If the .md is in no subdirectory everything is working fine.

You also break the image if you are refreshing a page with an image on it. It is now not search in the main directory, it is searched in the subdirectory.
This can be fixed if you navigate to an other page of the docs and then back to the page with the image.
But F5 is always breaking a image. (404 error)