[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 with export 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 your scr/router/index.js. nvm, 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.



  • @metalsadman Yes, already checked the router docs, nothing fancy there. The path property of router.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 your scr/router/index.js. nvm, 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.

    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 the site and post properties. Neat!

    Thank you both!


Log in to reply