I have a Vue 2 app that I'm working on and it kind of works like a search engine - I have a search bar where I can look up any term and when the search runs, results containing that specific term will be displayed.
Now, every result behaves like a link - if I click on it, I will be redirected to a totally different app, which is made in Angular (not sure if this is relevant, I guess you could think only that I navigate to a whole different domain and leave my Vue app).
The issue is that if I click the "back" button in my browser, I will not have the results that I left from, because once I leave my Vue app, its data is deleted.
I was thinking of storing the url containing the search term in local storage and get it when I open the Vue app again, but I don't think this is an option, as it would also behave like this if I refresh the page - moment when I want to have no search query at all.
Please ask for any clarifications needed.
Any suggestions on what could be done are appreciated.
Related
I have below two vuejs page. I created filters in my list page like search by user name and email. The filter is working fine, but the issue is when I type something in my search box and search it's working but after that when clicking on the edit user link and after that comes back to the list page the filter is removed and it shows me all data. My question is how can I remember the search I just need suggestions on how can I achieve that.
localstorage or vuex possible solution for that?
1. List of users
2. Edit User
The solution is to save the filter in a vuex state that way it doesnt change when u go back as long as you're still in the same tab and didnt close it.
If you don't refresh the page and navigate between the route's components, it's best to use Vuex, and on the other hand, if you want the same search results to be stored and retrieved even after refreshing the page, use the localStorage.
Furthermore, Vuex would be good to store large lists of data instead of localStorage.
Just finished learning Vuejs and after visiting a few websites that use Vuejs like;
a) https://coderstape.com
b) https://www.thenetninja.co.uk
c) https://laracasts.com
I noticed that by navigating around the websites we by clicking on navbar links and some other links then the pages refresh and I haven't been able to find out the reason online. Could someone kindly explain what's happening in that? Doesn't it go against the purpose of SPA?
For example the last site you specified: https://laracasts.com.
On its main page there is a white button "BROWSE COURSES". If you open Chrome DevTools panel(look at the picture with explanations), go to tab "Networks" (1) and then click on this white button, you can see GET request to "series?curated" (2). If you open its details, you can see that as response, new page is received in the form of an HTML code (3), not JSON for example, as is usually the case in SPA.
Also, if you look at what programming language is used on this site, for example, using service https://whatcms.org/?s=laracasts.com, you can see that this is a PHP, namely Laravel.
From all this, I can make the assumption that they use Vue.js only partially, maybe in several components, but the site navigation itself is presented in the form of traditional static pages, which is why the page reloads.
Also, for example, if you take a look at this website https://www.spendesk.com/, you can see that they use Vue.js+Nuxt.js, as well as Node.js, as indicated by service whatcms.org, and if you try to navigate to various pages on this site, you will see no page loading. I can say that this site is a true SPA in the form in which you mean it.
I heard that you can do a SPA with a Laravel backend, but I think that's another story.
I’d like to integrate vue into a existing webproject. In detail I want to use vue to integrate data from www.autoscout24.de into a website which basically uses Modx-cms, which means that the routing generally takes place inside Modx. With vue I want to realize a search form which I can integrate anywhere inside the existing website. The results should display under something like domain.tld/cars and a single car should be displayed at something like domain.tld/cars/cardetails#8574746
So regarding the routing I guess /cars and /cars/cardetails will be regular sites of the cms (vue only shows the data) but the Hashtag-routing for cardetails will be handled by vue, right?
As the App (should I call it three different apps?) will not be a SAP how can I pass data between the search form, /cars and /cars/cardetails#xyz? Is local storage the way to go?
Is that the right approach. Maybe my approach is even completely wrong, as I am new to vue?
Some further details regarding the app:
The searchform will react to every user input with a request to the Graph QL-Api in order to show the user live how many results he will get. Above the form there will be a teaser with around 10 random cars. After submitting the form the user is directed to /cars where he receives his resultslist (photos of the cars + some quick information). Above the list I want to show the filters so the user can adjust the resultslist. When the user clicks on the car he will get directed to /cars/cardetails#xyz where xyz is the id of the car in order to fetch the cardetails from the api via js/graphql.
Kind regards
Here are some screens to illustrate it. The parts which should be realized with vue are marked red.
i developed a radio stations widget (see it at my site). the problem is, i dont know how to make it persistent same like on the http://josephbeeson.com/gwapdemo/gwap.html . it's like facebook chatbar which not reload when navigate to any page. i have try n look for the demo codes but still not understand. please give step by step tutorial. i want to implement it on my social website http://www.heypy.com.
The whole page does not get reloaded, the new content is just loaded via AJAX and displayed within the current document.
To make it look to the user like he’s navigated to some other URL, the address bar content is updated using the HTML5 History API.
please give step by step tutorial.
Happy to give you the relevant keywords, so you can do research on them yourself. But won’t provide a private tutorial here, that’s not the purpose of this site. Thanks for your understanding.
I'd like to bring Safari to the front (switch to) but without using a URL, instead I'd like to see the "pages" view so the user can pick an already loaded page. Is this possible?
We open links in Safari and if the user returns to the app and selects the link again, I'd rather let them pick which Safari page to browse instead of opening a new one. I know that if the same URL is called it will open the correct page but the user may have navigated within the original site so the url no longer matches.
Thanks,
Rick
I don't think that its possible, i would use a UIWebView inside your app in order to get that experience you want, you can find the UIWebView apple docs here (http://developer.apple.com/library/ios/documentation/uikit/reference/UIWebView_Class/Reference/Reference.html) and also the equivalence of c# methods here (http://tirania.org/tmp/rosetta.html) hope this helps
Alex
Your app doesn’t get control of Safari’s UI. You might, however, be able to design your site so that it handles navigation via Javascript—AJAX and whatnot—so that the actual page URL doesn't change, and thus so that the page, re-opened from your app, brings up the existing Safari page. Of course that introduces further problems with your pages no longer being bookmarkable, but you might find that an acceptable tradeoff.