I do not know the difference between using Router replace and route redirect
and how to use them in my project I am new in vue.js
The Documentation should give you all information necessary.
But to answer your question:
router.replace() replaces the current entry in the history stack, while route.redirect() actually redirects to another path, having both in the history stack.
a redirect will be triggered before any navigation guard and trigger a new navigation to the desired path.
Related
I'm working on a Vue 3 app (using Quasar) with Vue Router. I want the user to be able to click on certain links (with paths beginning '/api/') which bypass the router completely and go straight to the backend API. But everything is getting picked up instead by the catch-all route (path: "/:catchAll(.*)*"). I tried adding a route without a matching component, path: "/api/*", but that doesn't work.
Is there a way for me to tell the router to ignore certain paths and let them be handled by the server?
i am developing an app in vue js with quasar and i would like to get current url in the index.js of Router folder but i do not know how. the problem is we can not access to window and ever $router to get url.
can anybody help me?
If a file loads before route you can still access all the functions with beforeEach
router.beforeEach(function(to,from,next){
console.log(to,from);
)
}
I did not understand your problems correctly. from is the current route location perhaps you can save it in a const variable.
I have a delete action in Nuxt application. And after a successful delete I need to redirect the user to another page. But in Nuxt router documentation, there is no mention about redirecting. So the question is how to do it in component?
You can totally use either
<nuxt-link :to="{ name: 'my-fancy-route' }">Go to</nuxt-link>
or
this.$router.push({ name: 'my-fancy-route' })
Depending on what you're trying to achieve here.
Also, all of your routes can be found with the Vue devtools, go to Routing > Routes and you will be able to see them all there.
For more info, Nuxt is using vue-router behind the curtains, so a reference to this part of the documentation will be good: https://router.vuejs.org/guide/essentials/navigation.html#router-push-location-oncomplete-onabort
As mentioned, you can use this.$router.push(yourPath) to redirect the user. You should be able to use either the route name or explicit path in place of yourPath. If you're unsure of the route names generated by Nuxt, you can view them in .nuxt/routes.json.
Note that Nuxt uses Vue router so, for more detailed documentation, you might want to read this.
this.$router.push({
path: '/your-path',
});
I currently develop an SPA web application using nuxt 2.7.1 as part of my bachelor's thesis.
On some of my pages I have set up beforeRouteEnter navigation guards to check whether a user may access the page. If not, I want to redirect the user to a dynamic route (namely /info/1).
When accessing the page protected by the navigation guard, Nuxt displays an error page stating This page could not be found, although the URL is correct and a simple reload at the error page correctly leads me to the dynamic route.
I am currently using the navigation guard in the following way:
beforeRouteEnter(to, from, next) {
if (!isValidAccess()) {
console.warn("illegal access");
next(`/info/1`);
} else next();
}
For clarification, my directory structure looks as follows:
pages
|__ info
| |__ _index.vue (redirect target)
|__ shop
|__ _index.vue (with navigation guard)
I have tried experimenting with the argument passed to next() but so far without success. When implementing another beforeRouteEnter in the target route and logging the to parameter, everything seems normal.
I hope you guys can help me. I already spent too much time on this issue.
Best regards
EDIT:
I have created a minimal example, where the routing to a dynamic route works without problems... https://codesandbox.io/embed/codesandboxnuxt-t1d0e
I will update the question when I find the solution to my problem.
This works for me - on landing page (index) you get redirected to your /info/1 dynamic route. Is this what you want?
https://codesandbox.io/embed/codesandboxnuxt-vvbrt
The only thing I've done was wrapping your dynamic route in <no-ssr> tag to get rid of an error. Your component is not compatible with SSR.
I want remove hashtag(#) from urls, but also i need to save no-reload mode. Can i do that?
I have: page.com/#/home
I want: page.com/home
I tried mode: 'history', but page reloads with it.
UPD: Is it possible to create SPA app without page reloading and with normal URLs?
When activating the history mode, you need to first configure your server according to the documentation. The reason for that is, that the history mode just changes the URL of the current page. When the user actually reloads the page, he'll get a 404 error, because the requested URL is not actually there. Reconfiguring the server to serve always the main index.html of your SPA resolves this issue.
When using a # in the URL (no history mode), the browser tries to navigate to the element with the ID, which was given after the # (within the same document). This was the original behavior of the fragment identifier. Therefore, if you add a link to your HTML with such a fragment identifier, the browser won't reload the page but actually look for the ID inside the document. The vue-router watches this change and routes you to the correct route. This is the reason it works with hashes. If you just add a regular URL to the HTML, the browser's native behavior is to actually navigate to this page (hard-link). This leads to your experienced reload effect.
The way to handle this, is, to never use regular links to route within a Vue Single-Page-Application. Use the tag <router-link> for routing between one page and another (but only within the SPA). This is the way to go, no matter if the browser allows the navigation with # without reloading or not. Here is the documentation for the recommended routing tag: link
You can also route from one route to another programmatically. Use $router.push() for that. Here is the documentation for that: link