[Solved] How to access route in a boot file?
-
Hi,
I am developing a SPA that uses a 3-rd party WordPress REST API client library (wp-api) and currently I bootstrap it in a boot file like this:
import WPAPI from 'wpapi' export default ({ Vue }) => { Vue.prototype.$wp = new WPAPI({ endpoint: 'http://my-wordpress-app.local/?rest_route=/', username: 'username', password: 'password' }) }
Now, I need to supply the endpoint URL dynamically, so I pass it as a query parameter in the URL to my SPA, e.g.
http://my-spa-app.local:8082/?site=http%3A%2F%2Fmy-wordpress-app.local&post=24
Is it possible to get the
site
URL parameter from Vue router in the boot file?I tried console-logging
router.currentRoute
(after passing it to the boot file withexport default ({ Vue, router })
of course) but none of the properties I’m interested in were populated.It seems to me that the route is not yet ready when boot files are running but I might be missing something obvious.
I was also thinking about using the URLSearchParams API but it feels a little bit like a hack in the Vue/Quasar world. Is it OK to use it or should I struggle to find a way with Vue Router?
-
@ddenev
export default ({ Vue, router }) => { router.push(...) }
https://quasar.dev/quasar-cli/cli-documentation/boot-files#Anatomy-of-a-boot-file -
@metalsadman , thanks but I think you might have misunderstood my question
I need to get the query param from the URL, not push something to the route.
I am accessing my SPA at an URL that contains query params and I need to make those query params available in a boot file. I was hoping that the router would be prepared, at the time boot files run, to provide that info.
Or maybe I got your answer wrong?
-
@ddenev You also have a
urlPath
param. It contains the full path with query. You’ll have to parse it though.But there’s something I don’t catch. Boot files are only executed on app initialization. If you change route inside your SPA, your boot file won’t be called again. So, it’s a bit strange to me to have a boot file dependent on a route ?
-
@tof06 said in How to access route in a boot file?:
@ddenev You also have a
urlPath
param. It contains the full path with query. You’ll have to parse it though.But there’s something I don’t catch. Boot files are only executed on app initialization. If you change route inside your SPA, your boot file won’t be called again. So, it’s a bit strange to me to have a boot file dependent on a route ?
yep, @ddenev you probably need your logic in a navigation guard ie. router.beforeEach,
best place would be in yournvm, look like you can also implement the guard in the same boot file, from docs example https://quasar.dev/quasar-cli/cli-documentation/boot-files#Router-authentication.scr/router/index.js
. -
@metalsadman Yes, already checked the router docs, nothing fancy there. The
path
property ofrouter.currentRoute
is not populated, it just contains'/'
.@tof06 I noticed the
urlPath
in the docs as well and it’s an option, yes. It’s just similar to using the URLSearchParams API, e.g.:const params = new URLSearchParams(location.search) const endpoint = params.get('site')
I just wanted to use the Vue Router way before I fallback to native JS
To address your question about the route - I indeed need this only at app init (my SPA is called at this URL initially and the site is passed as a query param) - I am aware that the boot file won’t be called again, but then - I don’t need to.@metalsadman said:
yep, @ddenev you probably need your logic in a navigation guard ie. router.beforeEach,
best place would be in yournvm, look like you can also implement the guard in the same boot file, from docs example https://quasar.dev/quasar-cli/cli-documentation/boot-files#Router-authentication.scr/router/index.js
.Aha! That might seem it
export default ({ Vue, router }) => { router.beforeEach((to, from, next) => { console.log(to) next() })
and the
to.query
object now contains thesite
andpost
properties. Neat!Thank you both!