I made a website.

I currently have a form and a link next to the form. When the user clicks on the link, whatever is typed in that form will be added to the url path of /funpage/, and become the new URL path. So for example, If the user types something like /hey/hi then clicks on the link. The link will take the user to a URL like /funpage/hey/hi. Another example, Is if the user types something like /hellooy/hi/hey/whatsup/hi then clicks on the link. The link will take the user to a URL like /funpage/hellooy/hi/hey/whatsup/hi.

The issue is that my Vue.js application with vue router, will think that the user is going to a new webpage, because the user inputted backslashes that get added to the URL and act like it is a whole new path.

My solution is to write a regex like /\//g and use the replace function in Javascript, for the user's input into the form, which gets rid of any backslash characters. So when the user types something like /hey/hi and clicks on the link, it will just take them to /funpage/heyhi which is what I want.

However I am sure that there are more characters that you don't want to be entered into a URL, that I know the user could input and would break it. I know about encodeURIComponent but this seems to be only used If you want to purposely add query params.

Does someone possibly have a regex better than /\//g to escape all characters that shouldn't be in a URL? or a better solution perhaps.

Thank you!