1

New to Vue and I have been learning quiete a bit. Recently I got stuck writing a little application at the following point.

I want a shareable URL, thus I am trying to add params to the url.

I have two components which will be using the parameters.

  • App.vue Main/Parent
  • Component1.vue is using :search
  • Component2.vue is using :lang and :semester

So far my code looks like this

main.js

routes: [{
    path: '*',
    name: 'default',
    component: VueFuse,
    props: (route) => ({
            search: route.query.search
        })
    }]
});

App.vue

<router-view
    :search="search"
/>
</router-view>

If I go to index.php?search=foo this works fine

What I want to achieve is the following url structure

index.php?search=foo&lang=de&semester=2019-1

But I got stuck at writing a correct way to route as this does not work

routes: [{
    path: '*',
    name: 'default',
    component: VueFuse,
    props: (route) => ({
            search: route.query.search
        })
    },
    {
    path: '*',
    name: 'CourseCard',
    component: CourseCard,
    props: (route) => ({
             lang: route.query.lang ,
             semester: route.query.semester
         })
    }]
});

From my own research there is at least a problem with the path being the same ,which I don't know how to fix as this app is pretty much a one pager. But I guess there is more to this then just the path being wrong.

(I define both modules as router-view and associate the correct name when using the above code)

So would love to hear the solution to this problem as it has been bugging me for a few days now. I was almost about to go for session cookies to solve the problem but thought I might give it a try and ask here and learn something new for upcoming projects as well :)

kadir
  • 13
  • 3
  • You need to parse the query string. https://stackoverflow.com/questions/2090551/parse-query-string-in-javascript – Roy J Dec 17 '18 at 13:59
  • Thanks @royJ . So this basically has nothing to do with Vue and I simply read the params through URLSearchParams – kadir Dec 17 '18 at 18:12
  • Correct that it is not a Vue issue. If you want to pull params by name, there is https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/get – Roy J Dec 17 '18 at 18:15

0 Answers0