How to add a GET parameter to a file obtained by lazy-loading of vue-router

Question

I want to use JWT to acquire divided files, but I don't know how to assign GET parameters.

Is there any way?

const Foo = () => import('@/components/Foo')

...

{
  path: '/',
  name: 'Foo',
  component: Foo
}

...

and I use vue-cli.

GET Request

Answer 1

This is how you do it:

{
  path: '/',
  name: 'Check',
  component: Check,
  query: {
    myParam: 'val'
  }
}

Source: https://router.vuejs.org/en/essentials/navigation.html

Edit: I think I misunderstood what you are trying to do. Are you trying to serve different components depending on the query param being passed? In that case I recommend using dynamic routing with params.

const HomeComponent = {
  template: `<div>
    <h1>Home</h1> 
    <p>route: {{ $route }}</p>
    <router-link :to="{ name: 'aboutFoo', params: { foo: 'foo' }}">Page With Foo</router-link>
    <router-link :to="{ name: 'aboutBar', params: { bar: 'bar' }}">Page With Bar</router-link>
  </div>`
};

const PageFooComponent = {
  template: `<div>
    <h1>Page with Foo</h1> 
    <p>params: {{ $route.params }}</p>
  </div>`
};

const PageBarComponent = {
  template: `<div>
    <h1>Page with Bar</h1> 
    <p>params: {{ $route.params }}</p>
  </div>`
};

const routes = [{
  path: '/',
  component: HomeComponent
},
{
  path: '/about/:foo',
  name: 'aboutFoo',
  component: PageFooComponent
},
{
  path: '/about/:bar',
  name: 'aboutBar',
  component: PageBarComponent
}];

Source: https://router.vuejs.org/en/essentials/dynamic-matching.html

JSfiddle: https://jsfiddle.net/gnzhz6jt/8/