I am using vuejs router as frontend for my app which is getting deeper and deeper day by day. Now my client has asked me to create a new section for my site which basically is a complete website in its nature. hence will have a different navigation. Now my question is how do i make it happen.
one solution is to use a variable or something to hide the main navigation and show this sub-navigation bar. This doesn't feel neat to me.
'
I open to any suggestions.
Related
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.
This question already has answers here:
Mount react-admin under /admin
(4 answers)
Closed last year.
I am trying to integrate react-admin into an existing react app and am able to get the basic starter pages up and running , however, after adding a dummy resource and clicking on it in the UI, I am redirected to http://my-application.net/[resource name], which is incorrectly showing my applications error page.
I am trying to set up react admin in a sandbox-like scenario to avoid conflicts with some custom stuff I'm using for routing* and I currently have things set up to display react-admin under the /admin path in my app. Is it possible to tell react-admin to prefix all of its links (i.e. when clicking on a resource) with admin so that my app can correctly detect and route these pages to react-admin? For example, in the scenario from the last paragraph, when clicking on the dummy resource, i want it to direct me to http://my-application.net/admin/[resource name] instead of http://my-application.net/[resource name]
The closest I have been able to get is this SO post, which talks about adding admin/ as a prefix to the name of all resources. I have been able to make this work with some tweaks to my routing configuration to send all /admin pages to react-admin, but changing the resource names like this also has the side effect of changing them in the UI (i.e. my users resource appears as admin/users in the sidebar of react-admin)
Other things I looked at that didn't seem to be useful:
Using the customRoutes prop in <Admin>
<Resource>'s props seem to be intended more for tweaking the end of urls for different CRUD operations
this SO post seems like it might be about something different since this is the first mention ive seen of UrlField.
Does React-admin have an option to automatically add a baseUrl to all it's links?
* While not relevant for this question, the reason I am trying to do things this way is because my routing system (UniversalRouter, see here) is redux-based and appears to directly conflict with some of the redux state that react-admin needs according to the Using redux in a custom app tutorial.
An answer I found from a post the StackOverflow "related" sidebar seems to suggest that the history API has this kind of functionality:
The only other thing I can think of is properly configuring baseName in your history.
referring to this line in the OP's question (variable name changed for clarity):
const newHistory = createHistory({ basename: '/myadmin' });
Passing this modified history into react-admin's Admin component seems to achieve the intended behavior where clicking on resource links now correctly redirects to that resource underneath the specified baseURL.
<Admin ... history={newHistory} ...>
This is also mentioned in this other answer, which is way more concise than mine or the one i based this answer off of.
So I am working on my first React Native project and I am curious as to what the proper way to handle user data is. I have 3 different pages that are: HomePage, ProfilePage, ChatPage. When a user logs in it navigates them to the HomePage.
As of now, I have it to where when the HomePage loads it makes a backend call that retrieves all of the user data and sets it to some states.
Now when the user navigates to a new page like the ProfilePage none of the data is there anymore of course so do I have to make another backend call? So one backend call for each page? Im sure there has to be some way to only make the backend call once. Could I possibly set a global state of some sort? Should I save all the user data to AsyncStorage?
My current File structure is as follows:
App.js -> Contains my React Navigation stack
HomePage.js
ProfilePage.js
ChatPage.js
Thanks for the help!
You can use Redux plus React-Redux.
To say in short redux is a state management library for react. The states will be global to your app accessible across various components inside app. also there will be reactivity.
For more info visit this link
https://react-redux.js.org/
You should use React-Redux and manage your states globally.
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.