基于路由动态导入组件

Question

我是 VueJS 的新手，我还没有找到基于路由加载组件的可能性。例如： page/:pageid 页/一个 页/二

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

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

问候，彼得

Answer 1

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

由于import() 返回一个promise，因此您可以使用以下方法注册您的异步组件：

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')
    }
  }
}

Answer 2

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

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