I'm working on a Vue.js 2 application, and I'm having difficulties handling page refresh/reload properly.
There are three issues:
Loss of current route
Loss of router params
Loss of selected tab on QTabPanel component
I managed to solve the second problem by saving the router params on a Vuex store, but I don't know how to solve the other two. I thought of storing also the selected Quasar's tab on Vuex, but it could be annoying, giving the fact that, on some components, I have multiple levels of nested tab panels.
I also don't know how to make the application stay on the current route after refreshing (I'm using history mode).
Could someone please give me a hint?
Related
I'm relatively new to Vue, and I'm working on a portfolio site that is essentially structured like a blog with single/detail views for each project, i.e. SingleProject.vue and are linked using dynamic routes based on the slug name, i.e. path: "/projects/:project_name_slug". In the template, I'm using Axios to request JSON data from a CMS, and passing the data to a post variable via a fetchPosts() function. I'm then running this.fetchPosts() on the mounted life cycle hook. On this single project view, I also have links to the next and previous projects based on the order defined in the CMS. I'm saving JSON data to respective arrays for nextPost and prevPost and then creating router links using the post slug names as follows:
<router-link
v-if="nextPost"
:to="{path: '/projects/' + nextPost.project_name_slug}"
>Next Project</router-link>
Now to get to my actual question: these links for next/previous posts work fine; but when clicked, the view does not fully refresh/transition, and all the text data—title, sidebar info, etc.— changes rapidly, but the images lag a bit while they're downloaded (see diagram below for a visual.) So, for a moment, one will see an image from the previous project alongside text info for the next one, while the new image loads. This is a bit distracting/off-putting, so I'm trying to find a way to essentially reload the view (as if one were clicking to a different [static] route altogether) when clicking on one of these links to change the dynamic route. I found this helpful SO post, which suggests adding a changing key to <router-view> to trigger a full lifecycle whenever the path changes, i.e.
<router-view :key="$route.fullPath"></router-view>
This approach works, and indeed forces the whole SingleProject view (images and all) to refresh when changing routes via the next/previous links. However, I'm wondering if there is a better/more efficient way to limit this lifecycle refresh to just the dynamic (project view) routes? I realize, as noted in that thread, this approach could impact performance by forcing the recycle on all route changes, not just those related to single project views. Please let me know if this is unclear in any way- and thanks for any insight!
If you want to earn such kind of thing you can do it by putting all needed routes into a variable which is an Object. Then you can define some logics to switch between them and apply to a component and use it globally.
Ah, by the way, You can use a good tool called Vuepress. It has its own Previous and Next link buttons. You can say it is for documentation. No you can make blogs and portfolios too. There are so many projects created with Vuepress on the internet.
And even you can change layouts, styles or create your own theme from zero.
Below you can find link to many different projects and websites.
And most of them are ready themes to use in your projects.
https://github.com/topics/vuepress-theme
In my application, I have a multi-page form that lives on the URL http://localhost:3000/form. When I change pages in the form, the URL remains the same, but the state changes to render different views (pages of the form).
A new feature I want to implement is to allow the browser back button to switch views/pages (aka change state) in the multi-page form.
Is this possible? How can I achieve this?
Why exactly do you want to keep the same route? If a user wants to get back to the same state they were at via a deep link they would not be able to with this implementation would they?
If you want to use the same route you can at least use # routes to keep track of where in the form the user is.
Eg.
http://localhost:3000/form#step1,
http://localhost:3000/form#step2
then the back button would work to move them back a step.
I have an Angular 7 app with plenty of screens (components) that display a grid of records. I would like to setup these screens so that when a user clicks on a record (visiting another screen) then clicking Back, they see the same filters, sort order, and scroll position.
I have experience doing this in a non-SPA app that uses the same grid library that I'm using in my Angular app (Datatables.net). I know how to get, set, and stringify the data I need. In the non-SPA app I simply persisted the data using window.location.replace into the hash portion of the URL.
My question is: what is the best way to approach this in a modern, Angular 6 app? Possible answers seem to include:
HTML 5 History API
The old window.location API, as mentioned above.
Angular's Location API
sessionStorage or localStorage as was suggested here but downvoted for reasons I'm not clear on...
Possibly something via the Routing & Navigation tooling in Angular that I've overlooked?
Obviously that's a lot of choices. What's the best approach?
I found a lot of similar questions asked on SO, but I couldn't find a single one where the answers weren't extremely specific to the use case.
One factor that will affect which answers do/don't work is that I think I'll only want this behavior if the users clicks back but not if they revisit the same screen via the main nav. So if they click "Orders" in the main nav, it should default to the normal order, no filters, and be scrolled to the top. Trying to use localStorage, for example, seems easy except that I have no idea how I'd tell if a user clicked the main nav or clicked Back.
https://imgur.com/sglkD7K
Using reddit as an example, here is a gif of what I am trying to achieve. From the initial route(the feed), they click on a post and are directed to a new route of an overlay(the post) which is rendered while the feed behind it is still rendered(if you hide the post overlay in dev tools the feed is still there). I looked into nested routes to accomplish this but it seems any nested routes can only be appended to current routes, where as I would want a completely new route name(there is a profile overlay which is able to be opened from many different pages, so instead of appending "/profile" to all those separate routes, it's desired for it just be "/profile". I'm not sure if this is possible with just react-router, or would require redux or something of the sort.
In my app, I have a profile state which can be accessed from many places in the app. I have a tabbed app, and I'd like to be able to navigate to a shared state, the profile. My problem is showing the back button in the ion-nav-bar when in the profile state, which will return the user to the previous state. My code pen demonstrates the issue. I would even be fine with having the tabs show on the profile page, but I really want to avoid duplicating states.
The second codepen achieves my goal, by adding more states and injecting the user into the profile controller via the resolve. As you will see, I have two profile states, tab.users.profile, and tab.friends.profile, and they are both doing the exact same thing.
This works, and I guess it isn't such a problem, but I'd really prefer to DRY things up. In my actual app, I'd have the same state repeated 6+ times, and everything just screams at me that it is wrong.
Does anyone know a more efficient way to achieve my goal?