Is there a way to determine in vue-router 4 if router.go(-1); takes you off the site? I have a login route that I'd like direct to '/' on the initial navigation but otherwise should go to the previous page if the previous page is within the site.
I've reviewed useRoute and useRouter and I'm not seeing a method to prevent navigation off the site.
Related
I have a Laravel + Vue site that allows users to book on to training courses. A typical course URL might be www.mysite.com/courses/a-great-course. This is set up in my router.js file in the usual way:
path: '/courses/:slug',
component: Course,
name: 'course'
with the slug naturally being pulled from the database.
I have a standard vue-router catch all route defined that works fine for the first level of the URL and diverts to a Not Found page, but if I ask for a course that doesn't exist - www.mysite.com/courses/wrong-course - it still loads the page and just sits on the loading animation.
As I understand it I need to implement a navigation guard but I'm completely confused as to how to do that - it seems all the online examples deal with situations like checking if a user is authenticated in the Store.
Can anyone give me some pointers?
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.
Is it possible to use Vue router with such urls?
first page - /index.html?mode=api&tab=program
second page - /index.html?mode=api&tab=users
third page - /index.html?mode=api&tab=contact
etc.....
As you can see the changes only in params "tab".
Depending on that you will see the page. I can't find such example.
I published my website (a SPA made with vue) to Github-Pages. This website uses "history mode", so the # does not appear when navigating to a different "page".
When direct URL navigation (user types website.com/downloads for example) or a refresh while not on the root page happens, the website tries to display 404.html.
When the 404.html loads, it redirects to the homepage, passing the route name taken from the URL:
<script>
const segment = 1;
//Gets the relative path and the hash of the URL.
sessionStorage.redirect = location.pathname.split('/').slice(0, 1 + segment).join('/');
sessionStorage.hash = location.hash;
//Forces the navigation back to the main page, since it's the only entry point that works.
location.replace('/' + location.pathname.slice(1).split('/').slice(segment).join('/'));
</script>
For the user, it is a bit noticeable, but it will display the correct page.
But while loading, it will report a 404 in the network tab, which could cause issues in integrations with other websites.
Is there anyway to fake a 200 response when loading these pages?
This is a typical issue with Single Page Applications using history mode (history.pushState) to simulate a full URL so that a page isn’t reloaded when the URL changes.
Since vue.js is an SPA framework, it means there is only one HTML and tag containing the “app” id. Due to this disadvantage, Google bots would not be able to read the content of a particular landing page and your website might not get the higher rankings. To make Google bots read the content, you can use two method, “Pre-rendering” and “Server-side rendering.”
Also you can try using routing in <li> and <a> tags and buttons instead of href=“/path”. Using a router link makes page navigation very fast and it benefits the SEO of your website as well.
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