I want remove hashtag(#) from urls, but also i need to save no-reload mode. Can i do that?
I have: page.com/#/home
I want: page.com/home
I tried mode: 'history', but page reloads with it.
UPD: Is it possible to create SPA app without page reloading and with normal URLs?
Asked
Active
Viewed 1.1k times
6
ramazan793
- 669
- 1
- 9
- 23
-
2Possible duplicate of [How to remove hashbang from url?](https://stackoverflow.com/questions/34623833/how-to-remove-hashbang-from-url) – Daniel Beck Dec 02 '17 at 22:26
-
(`mode:history` is right; did you also do the serverside configuration described [here](https://router.vuejs.org/en/essentials/history-mode.html)?) – Daniel Beck Dec 02 '17 at 22:28
-
@DanielBeck Doesn't `mode:history` reload the page even if i configurate it? – ramazan793 Dec 03 '17 at 09:18
-
What do you mean by `no-reload` mode? History mode just changes the URL without a hash. If you then manually reload the page, you will see a 404, because the browser actually requests that generated URL. Therefore, you need to configure your server to provide the `index.html` of your SPA on every URL of your server. – ssc-hrep3 Dec 03 '17 at 10:21
-
@ssc-hrep3 as I wrote, I dont want to page reloading when I'm navigating in my website. For example, if I'm trying to go `page.com/home` from `page.com/about`, I want to do it without reloading the page. – ramazan793 Dec 03 '17 at 10:25
-
How do you go from `/home` to `/about`? Using a regular `` link? – ssc-hrep3 Dec 03 '17 at 10:34
-
@ssc-hrep3 i have used regular to do it and it works(without reloading the page), but with /#/ in url name. My question - how to do it without #(and also without reloading). Is it possible? – ramazan793 Dec 03 '17 at 10:36
-
1You shouldn't route with native `` tags from one route to another. This works only with a `#` and only because of the original behavior and handling of the fragment identifier by a browser. See my answer. – ssc-hrep3 Dec 03 '17 at 10:44
-
A hashtag is a means of indicating that a term, in plain text, should be hyperlinked as a search term (on social media networks). It gets the name because it it uses a hash character to prefix it. Most things that use a hash symbol are not hashtags. – Quentin Dec 03 '17 at 10:54
1 Answers
8
When activating the history mode, you need to first configure your server according to the documentation. The reason for that is, that the history mode just changes the URL of the current page. When the user actually reloads the page, he'll get a 404 error, because the requested URL is not actually there. Reconfiguring the server to serve always the main index.html of your SPA resolves this issue.
When using a # in the URL (no history mode), the browser tries to navigate to the element with the ID, which was given after the # (within the same document). This was the original behavior of the fragment identifier. Therefore, if you add a link to your HTML with such a fragment identifier, the browser won't reload the page but actually look for the ID inside the document. The vue-router watches this change and routes you to the correct route. This is the reason it works with hashes. If you just add a regular URL to the HTML, the browser's native behavior is to actually navigate to this page (hard-link). This leads to your experienced reload effect.
The way to handle this, is, to never use regular links to route within a Vue Single-Page-Application. Use the tag <router-link> for routing between one page and another (but only within the SPA). This is the way to go, no matter if the browser allows the navigation with # without reloading or not. Here is the documentation for the recommended routing tag: link
You can also route from one route to another programmatically. Use $router.push() for that. Here is the documentation for that: link
ssc-hrep3
- 15,024
- 7
- 48
- 87