如何在 Vue 的文件夹中构建页面？答案

【问题标题】：How do you build page within a folder in Vue?如何在 Vue 的文件夹中构建页面？
【发布时间】：2020-12-24 14:37:43
【问题描述】：

我正在尝试将我的 URL 设为 /social/fb/，我已尝试查找在线和文档，但我一生都找不到这个简单问题的答案。

我的文件夹结构是：页面 -社会的 --fb

我在页面中有一个 social.vue 文件，它可以像 www.example.com/social 一样正常工作，但无法获得 www.example.com/social/fb。任何方向将不胜感激。

【问题讨论】：

标签： vue.js nuxt.js

【解决方案1】：

在页面内创建社交文件夹，然后在社交文件夹内创建 fb.vue。这应该工作

【讨论】：

【解决方案2】：

我通常从路由器加载layout.vue，并将其他所有内容视为子节点，作为路由器视图传递，这样就可以为每个父节点保存一个index.vue。

但您总是希望创建一个目录来包含社交页面。然后就是简单地添加到 router.js 文件的情况。

layouts/template.vue

<template>
  <router-view></router-view>
</template>

<script>
export default {
  name: 'layout-template'
}
</script>

router.js

  ...
  /*
   * Social
   */
  {
    path: '/social',
    component: () => import('./layout/template.vue'),
    props: true,
    // rendered inside <router-view>
    children: [{
      path: '/',
      component: () => import('./pages/social/index.vue')
    }, {
      path: 'fb',
      component: () => import('./pages/social/fb.vue')
    }, {
      path: 'twitter',
      component: () => import('./pages/social/twitter.vue')
    },
    // or do something more dynamic
    {
      path: ':network', // accessible in component though `$route.params.network`
      props: true, // makes accessible though `props: ['network']` 
      component: () => import('./pages/social/network.vue')
    }]
  },
  ...

./pages/social/index.vue - 可以显示 /social 主页或将路由更改为 import('./pages/not-found.vue')。

./pages/social/network.vue

<template>
  ...
</template>

<script>
export default {
  name: "page-social-network",
  props: {
    network: {
      type: String,
      default: ''
    }
  },
  created() {
    // or through
    this.$route.params.network
  }
};
</script>

<style lang="scss" scoped></style>

见：https://router.vuejs.org/guide/essentials/passing-props.html#boolean-mode

否则只是标准的 vue 页面

【讨论】：