vue-router延迟加载获取的文件如何添加GET参数

Question

我想使用JWT获取分割文件，但是不知道如何分配GET参数。

有什么办法吗？

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

...

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

...

我使用 vue-cli。

GET Request

Answer 1

这就是你的做法：

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

来源：https://router.vuejs.org/en/essentials/navigation.html

编辑：我想我误解了你想要做什么。您是否尝试根据传递的查询参数为不同的组件提供服务？在这种情况下，我建议使用带参数的动态路由。

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
}];

来源：https://router.vuejs.org/en/essentials/dynamic-matching.html

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