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!
Related
I have a full static NUXT application, so i would expect all content on pages to be ready immediately after route change.
I'm experiencing that there is a slight delay between the route change and each component appearing on the page, resulting in layout shifts.
Is this expected behaviour?
I've made a minimal reproduction which produces the same behaviour. (Sometimes ;) )
https://github.com/Jonatan-bs/static-nuxt-test
It's a create-nuxt-app with a page that renders a lot of components dynamically.
to reproduce:
npm run install
npm run generate
npm run start
click on 'test' link, which links to another page
Expected behaviour:
All components would be present immediately after the page change, since it's a static generated app.
Observed behaviour:
As shown on the attached picture
after route change the component with yellow background is rendered.
then shortly after, the component with black background is rendered
The amount of memory taken (several MB) + several thousands of nodes at the same time are not crashing your page, you should already be happy that this test passes. This is because Vue is pretty lightweight. You can't ask the browser to smoothly switch from one page to the other, especially in an SPA context where stuff needs to be removed + added back.
More details in my previous comment are available here: Nuxt SSG: Page doesn't have all content immediately after route change
I'm working on a project and using AOS animation but all div blocks that have an animation on them disappear whenever I refresh the page. I want to trigger a function whenever the page is refreshed so I can use the AOS.refresh(). Is there any way to do this in nuxt.js or maybe a way to go around this AOS bug?
UPDATE:
here's an example this is how the page looks before reloading:
then after reloading:
As you can see. the elements that still appear after the reloading are the ones without AOS animation.
Additionally, if you focus your eyes on the sidebar, notice I have a home page. this problem happens literally everywhere except the home page. When I go to the home page then I go back to other pages the problem basically disappears.
Not sure where is your bug coming from but so far, the homepage of the library achieves to have an animation on a page refresh. Maybe it is a lifecycle code issue at some point. Maybe post some for us to help you debug this one.
To my knowledge, there is no way of watching if your webpage is actually refreshed because there is nothing related to state before this. The only somehow useful thing that may be used sometime is this.$router.history._startLocation, which will give you the first path your webapp was loaded on.
Not sure if it may help you anyhow.
Also, you can maybe give a shot to this library in VueJS and wire it to Nuxt. Should behave pretty much the same.
I am using vue router and have already set mode to history. My app works fine except that when i try to use hash (#) in url in order to scroll the page to an element in the same page (eg: #information) the page reloads (meaning it re-requests data from my backend). I think the router thinks the page has changed and tries to load that page.
EDIT: The page does not really reload. It re-fetches data from by backend. I understand this as a reload though.
I tried googling but all i get is how to use history mode. Maybe i am searching the wrong way.
Any clues on how to fix this?
Here is my route:
{
path: '/p/:idormpn/:slug',
name: 'Productpage',
component: Productpage
}
Here is an example of what is happening:
https://www.e-checkout.gr/p/63529/dermatina-anatomika-pedila-mavro
Thanks!
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 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.