关于vue项目目录及vue-router加载问题

jsliang
  • 293

问题背景:

最近在写毕业设计,学了vue挺多知识,然后这几天开始写,查了很多资料,然后其中有些问题想要问下。
首先我的项目目录是这样的:

图片描述

问题1:不知道这样建目录规范不?

问题2:在上面的目录中,MyOrg.vue我是这么写的:

<template>
  <div>
    <h1>欢迎来到我的华懒</h1>
    <router-view></router-view>
  </div>
</template>

然后路由:

{
      path: '/MyOrg',
      name: 'MyOrg',
      component: MyOrg,
      children: [
        {
          path: '/MyOrg',
          name: 'MyOrgIndex',
          component: MyOrgIndex
        },
        {
          path: '/myorg/AddTopic',
          name: AddTopic,
          component: AddTopic
        },
        {
          path: '/myorg/News',
          name: News,
          component: News
        },
      ]
    },

这样当我:
<el-menu-item index="/MyOrg">我的华懒</el-menu-item>
就能加载固定在MyOrg.vue中的目录和需要改变的目录,因为/MyOrg在路由中写了两次,分别导入了两个模板,感觉有点奇怪,想知道这么写对不对?

效果:
MyOrg.vue
图片描述

AddTopic.vue
图片描述

News.vue
图片描述

谢谢解答~

回复
阅读 2k
2 个回答

问题1,其实目录是否规范,一部分取决于划分模块是否合理,但是你给的信息有限,只能说“比较清晰”。如果项目复杂起来,会有很复杂的目录,比如说api,静态资源,配置文件,工具类,自定义类,状态管理和路由,然后就是各种组件了,可以参考一下网上一些大神的项目。
问题2,通常SPA都有一个头一个脚,有的会有侧边栏,面包屑导航什么的。我的做法是,定义一个 容器组件:Full.vue,内容大致如下:

<appHead />
<router-view />
<appFooter />

然后路由里让 '/'指向 Full.vue,再重定向到一个 首页,比如叫 welcome.vue;导航的时候,full的子组件都会有这个头部和页脚了。

你的意思是访问"/MyOrg"路由默认渲染MyOrgIndex组件吗,如果是的话可以用重定向,不要写两个一样的路由

{
      path: '/MyOrg',
      redirect: '/MyOrg/Index'  // 重定向到二级路由
},
{
      path: '/MyOrg',
      name: 'MyOrg',
      component: MyOrg,
      children: [
        {
          path: '/MyOrg/Index',  // 二级路由
          name: 'MyOrgIndex',
          component: MyOrgIndex
        },
        {
          path: '/myorg/AddTopic',
          name: AddTopic,
          component: AddTopic
        },
        {
          path: '/myorg/News',
          name: News,
          component: News
        },
      ]
    },
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏