vue.js - 如何在一个 url 上使用不同的页面视图？

Question

例如：我有一个像 /content/supercontenturl/ 这样的 url。如果此内容类型是视频（我的数据库中的参数），我将在页面和其他组件上显示 videoplayer，但如果内容类型是文本或其他，我想为此内容加载特定的 page.vue自己的组件，但 url 必须相同 - /content/supercontenturl/

我的结构页面：

index.vue
    /content/
        /_supercontenturl/
        _id.vue // The page for video 
        _id_text.vue // The page for text
        ...          // Other pages 
    index.vue

标签： vue.jsroutingnuxt.js

Answer 1

您应该记住在 nuxt 中 Pages 目录中的所有 vue 文件都是组件检查指南，并且您添加的每个文件或目录都会创建路由。

满足您的需求的简单方法是将具有正确名称的视频页面和内容页面放在组件目录中。在页面中创建一个新文件，它将在脚本中包含数据调用和模板将包含组件选择器，您可以使用 v-if 或动态组件来加载正确的组件。并通过道具传递数据。