How to allow the hash character in the URL?

Question

My app only has two kinds of URLs: / (root URL) and /id (for example: /something). But now I need to allow two parameters separated by a hash character, like this: /something/param1/#/param2.

So in my nuxt.config.js I added:

router: {
  extendRoutes(routes, resolve) {
    routes.push({
      path: '/:id/:location/#/:action',
      components: {
        default: resolve(__dirname, 'pages/_id')
      },
      chunkNames: {
        modal: 'pages/_id'
      }
    })
  }
}

But then /something/param1/#/param2 URL gives a 404 page..

If instead I do:

routes.push({
  path: '/:id/:location/hash/:action'
})

...and try the URL /something/param1/hash/param2 then it works fine. But, I want to use # between my two other parameters in the URL, not hash or anything else.

Any idea if this is possible and how to achieve it?

Checkout this post: https://stackoverflow.com/questions/5007352/how-to-escape-hash-character-in-url — Vasile Radeanu, Sep 02 '21 at 13:57
@Radeanu thanks, looks like `Nuxt` is actually expecting `%23` instead of `#` though. I did `path: '/:id/:location/%23/:action',` and `/something/param1/#/param2` fails although `/something/param1/%23/param2` works. Any idea? — drake035, Sep 02 '21 at 14:16

score 0 · Answer 1 · answered Sep 02 '21 at 14:00

Looking at this answer: https://stackoverflow.com/a/3867513/8816585
You can see the valid characters in an URL, mainly letters and some small subset of special chars. / do serve as a separation for files and directories.

I'm not sure if you saw /#/ being used somewhere but it's clearly not standard, maybe not properly supported by all the browsers and probably not a good idea neither. Why the need to something like this?

How to allow the hash character in the URL?

1 Answers1