I try to mimic how Pinterest (and a lot of other popular sites) achieved this.
When a user clicks a modal, the modal pops up, the address bar url changes, a new history entry is added, but the page doesn't reload. And when the user closes the modal, everything reverts to previous state with a new history is also added.
Vue-Router offers router.push, router.replace and router.go, but they don't achieve what I want. router.push would navigate to that url, but I am opening a modal which has an URL associated with it, not going to that url. router.replace replaces the current history entry, not adding new one.
What is the standard way to do this?
Use Vue Router (google it) for this. Just keep in mind that stuff like this generally means a lot of work for very little gain.
With Vue Router you can set your app up so that page.com/book/Test directs you to page.com/book with the variable Test set.
I recommend setting your site up as a single file project using Webpack and the Vue plugin, and using that eith Vue router. Then you can get the functionality you want.
Related
So I've got a Vue Router running in history mode. It works perfectly when clicking <router-links>, but I can't get address bar navigations to 'stick'. The address always reverts back to the previous URL, despite loading the correct page content.
You can replicate this yourself by running vue create projectName and choosing Manually select features -> Router -> Vue 3.x -> Use history mode (Y). This creates the example project below.
If you navigate to http://localhost:8080/about, the About view loads. Correct.
Now if you type http://localhost:8080/, the Home view loads, but the URL reverts to /about!
And if you type http://localhost:8080/about again, the exact opposite happens.
Am I doing something wrong, or is this a bug in Vue Router 4?
Turns out this is a bug exclusively in Vivaldi. Popular browsers show the expected behaviour with Vue Router, even other Chromium browsers.
I really should've checked that to begin with. Hope this helps someone else, though!
This is as messy as it sounds...as it doesnt seem to be answered by other questions related to forcing a refresh in a vue app (but happy to be proven wrong).
I have a simple page utilizing some jquery which is loading a 3rd party vuejs app. The 3rd party app is loading correctly and working well.
The problem is if a link is clicked in the 3rd party app which is working through the vue-router. Although I see the url changing as per normal vue-router functionality but the view/template itself is not updating/changing.
If at that point I call a location.reload() then the page will reload and the correct template will display. However this is very slow and am trying to find out why the view is not refreshing under these conditions.
It obviously has something to do with the fact that I am generating the vueapp via external scripts but cant pin down what the issue is.
Is there some way I can force the view to refresh without reloading the whole page?
Thanks
Turns out that there was something else going on here.
After the external vue app was loaded, some innerhtml content was being modified by my external script. Nothing directly related to the app but this seemingly broke the underlying app.
Stopping to do the replacements has the underlying app working as expected.
I want to remove hash(#) from url in vuejs using vue-router in Laravel. So I used mode:'history' or history: true
const router = new VueRouter({
routes: routes,
mode: 'history'
//history: true
});
and it works perfectly but the problem is that each time request is changed for example from example.com/home to example.com/user the request will be sent to server and all the page will be refreshed however I want to only change the content between head and foot of the page. So when I mark an string in the top menu it will not unmarked when going to another url but now it sends the server and the page loads completely when not using mode:'hash'.
How can I remove hash without sending another request to server in order not to load the page again completely and load only body part?
Thanks
I don't have created links yet I just change it manually in url. If you are saying that doesn't work manually so why it works with mode: 'hash'? So if router-link works just like that I should use it I think. I didn't know about that
ok… I get it
if you are using history mode, you have to use <route-link> because, as noted above,
In HTML5 history mode, router-link will intercept the click event so that the browser doesn't try to reload the page.
When you enter a new url, the browser loads that page, that's the browser's way of operating and you can't get around that. The framework however handler it differently, by updating the url and the content, but not actually redirecting(reloading)
The reason why this works with the hashbang, is that the broser treats everything after the # character as in-page navigation. Meaning it doesn't consider it as a redirect. The hash character was traditionally used in HTML to allow navigate to items within a page.
For example, about-us.html#contact redirects a user to the about page and scrolls to the contact form.
The modern js frameworks use the hash to hack this navigation by not redirecting, and using the content after the hash to pass routes.
For example, if you have a route such as localhost:8080/#/about-us, the localhost:8080/# part is the same as localhost:8080/index.html# so changing anything after the # character keeps the browser on the same page, and the javascript (vue router) handles any changes that are needed.
Hope this clears it up. Fwiw, I haven't used history mode on any of my projects.
I have an elm app that incorporates logging in and fetching data from a server. Once I've logged in, I navigate to /#/pages/13 and it updates the model with page id 13. If I click around within the app, I see evidence that that page persists in the model.
When I navigate away from that page via internal links, then enter http://localhost:3000/#/pages/13 into the URL, I still see that page.
If I enter that URL while I am at that location, it seems to treat the behavior as a complete refresh, resetting the model...including my token, so it logs me out.
How can I enter the same page into the URL without elm resetting the model?
(If it matters, I am using gulp)
That behaviour seems to be by design, although I didn't find an official source for this.
The most you can do is register a beforeunload listener, which might show a prompt allowing the user to cancel the navigation.
Related: https://stackoverflow.com/a/34415095/2014893
I'm using the Router in Durandaljs to control routing in a SPA. In my application all routes are created dynamically. Therefore I use only mapUnknownRoutes for mapping all routes. The problem I have is that if the user navigates between different hashes in the same page, clicking on 'back' leads to unloading the current page - something I wish to prevent. I thought of doing this by using guardRoute and there return 'false' when navigation remains in the same page, but 'guardRoute' runs only after 'mapUnknownRoutes' hence does not prevent the unloading of the current page.
Any suggestions?
Thanks !
Elior