Question

我是VueJS的新手，我还没有发现可以基于路由加载组件的可能性。例如： page /：pageid 页/一个页/两张

我有一个组件Page.vue 在该组件中，我观察路线的变化。如果路由为$ pageid，则导入并加载组件$ pageid。

我已阅读此文档：https://vuejs.org/v2/guide/components-dynamic-async.html。但这更多地集中在延迟加载上。我没有看到动态导入和加载的示例。

关于彼得

Answer 1

根据vue路由器的Dynamic Route Matching，您可以通过params对象的$route属性访问url参数。在您的情况下，它将是$route.params.pageid，因此您可以使用它来基于URL中的pageid参数动态更改内容。还要注意，在从您的情况下的page/one到page/two的url更改中，将使用相同的组件，因此您将必须注意$route对象的更改并动态地更改内容。

watch: {
  '$route' (to, from) {
    // react to route changes...
  }
}

Answer 2

Vue允许您将组件定义为工厂功能，异步解析您的组件定义。

由于import()返回了保证，因此您可以使用以下方法注册异步组件：

export default {
  components: {
    'Alfa': () => import('@/components/Alfa'),
    'Bravo': () => import('@/components/Bravo'),
    'Charlie': () => import('@/components/Charlie')
  }
}

Vue仅在组件需要执行以下操作时才触发工厂功能：呈现并缓存结果以供将来重新渲染。

因此，仅在需要渲染组件时才加载组件。

您可以使用动态组件通过以下方式呈现它：

<component :is='page'/>

和

export default {
  computed: {
    page () {
      return 'Alfa'
    }
  }
}

如果您已经使用vue-router，则可以在路由定义中直接使用它。有关更多信息，请参见文档here。

const router = new VueRouter({
  routes: [{
    path: '/alfa',
    component: () => import('@/components/Alfa')
  }, {
    path: '/bravo',
    component: () => import('@/components/Bravo')
  }, {
    path: '/charlie',
    component: () => import('@/components/Charlie')
  }]
})

如您所见，这是动态导入但静态注册（您必须提供组件的路径），这在大多数情况下都适用。但是，如果要使用动态注册，则可以直接返回组件而不是返回名称，请参见文档here。

export default {
  computed: {
    page () {
      return () => import('@/components/Alfa')
    }
  }
}

基于路线的动态导入组件

2 个答案: