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.
Related
I'm trying to serve my assets through Cloudfront (s3) and so:
I have a env variable that contains the cloudfront URL.
I want to use it globally in my app so I did this:
app.config.globalProperties.$IMAGE_URL = import.meta.env.IMAGE_URL;
app.mount("#app");
It works perfectly in local but when I deploy the app. The views are left blank whenever they have this.$IMAGE_URL on it. With no error message. The issues comes from that, not Cloudfront. What am I missing?
Fixed the issue by using provide and inject to use then
// in main.js
app.provide("IMAGE_URL", import.meta.env.IMAGE_URL);
// in components script setup
import {inject} from 'vue'
const IMAGE_URL = inject("IMAGE_URL");
// in <img>
:src="`${IMAGE_URL}/path/to/asset`"
hope it helps !
I have a problem where nuxt 3 is forcing the payload.js to be at root-level. I need it to be with the other assets in the _nuxt folder or in another subfolder.
When I change the baseURL it works, but then it seems the vue router now redirects the index page to the baseURL. So I need to either find a different way to output the payload.js or find a way to change the vue routers base url.
Does anyone have a solution for this?
app: {
baseURL: '/mysubfolder/something',
},
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.
Working on a Nuxt project and trying to programmatically change route.
In a method I am using this:
$nuxt.$router.push({
path: `vehicles-for-sale`
})
This looks like it initially works, but it then causes a page refresh to '/vehicles-for-sale?.
Is there anything different I need to do with Nuxt to get this working? I have a pages folder called 'vehicles-for-sale' and an index.vue file within that.
Simply use this:
this.$router.push('vehicles-for-sale')
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.