如何在一个 url 上使用不同的页面视图？答案

【问题标题】：How to use different pages view on one url?如何在一个 url 上使用不同的页面视图？
【发布时间】：2020-06-05 00:01:54
【问题描述】：

例如：我有一个像 /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

【问题讨论】：

我不知道nuxt.js 是否有解决方案，但您是否尝试设置一个组件来控制和显示所需页面？
感谢您的建议！我知道这个解决方案，但可能存在带有页面的解决方案。
@ELAlamiAnas 好吧，我想在这种情况下组件是最好的解决方案。
酷，很高兴知道，谢谢:)

标签： vue.js routing nuxt.js

【解决方案1】：

你应该记住，在 nuxt 中，Pages 目录内的所有 vue 文件都是组件check the guide，并且你添加的每个文件或目录都会创建路由。

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

【讨论】：