No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    [Solved] How to access route in a boot file?

    Help
    3
    6
    2251
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • D
      ddenev last edited by ddenev

      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?

      1 Reply Last reply Reply Quote 0
      • metalsadman
        metalsadman last edited by metalsadman

        @ddenev export default ({ Vue, router }) => { router.push(...) } https://quasar.dev/quasar-cli/cli-documentation/boot-files#Anatomy-of-a-boot-file

        D 1 Reply Last reply Reply Quote 0
        • D
          ddenev @metalsadman last edited by

          @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? 🙂

          1 Reply Last reply Reply Quote 0
          • T
            tof06 last edited by

            @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 ? 🙂

            metalsadman 1 Reply Last reply Reply Quote 0
            • metalsadman
              metalsadman @tof06 last edited by metalsadman

              @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.

              D 1 Reply Last reply Reply Quote 0
              • D
                ddenev @metalsadman last edited by

                @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!

                1 Reply Last reply Reply Quote 0
                • First post
                  Last post