鍍金池/ 問答/HTML/ 關(guān)于vue項(xiàng)目目錄及vue-router加載問題

關(guān)于vue項(xiàng)目目錄及vue-router加載問題

問題背景：

最近在寫畢業(yè)設(shè)計(jì)，學(xué)了vue挺多知識(shí)，然后這幾天開始寫，查了很多資料，然后其中有些問題想要問下。
首先我的項(xiàng)目目錄是這樣的：

圖片描述

問題1：不知道這樣建目錄規(guī)范不？

問題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
        },
      ]
    },

這樣當(dāng)我：
<el-menu-item index="/MyOrg">我的華懶</el-menu-item>
就能加載固定在MyOrg.vue中的目錄和需要改變的目錄，因?yàn)?MyOrg在路由中寫了兩次，分別導(dǎo)入了兩個(gè)模板，感覺有點(diǎn)奇怪，想知道這么寫對(duì)不對(duì)？

效果：
MyOrg.vue
圖片描述

AddTopic.vue
圖片描述

News.vue
圖片描述

謝謝解答~

回答
編輯回答
落殤

你的意思是訪問"/MyOrg"路由默認(rèn)渲染MyOrgIndex組件嗎，如果是的話可以用重定向，不要寫兩個(gè)一樣的路由

{
      path: '/MyOrg',
      redirect: '/MyOrg/Index'  // 重定向到二級(jí)路由
},
{
      path: '/MyOrg',
      name: 'MyOrg',
      component: MyOrg,
      children: [
        {
          path: '/MyOrg/Index',  // 二級(jí)路由
          name: 'MyOrgIndex',
          component: MyOrgIndex
        },
        {
          path: '/myorg/AddTopic',
          name: AddTopic,
          component: AddTopic
        },
        {
          path: '/myorg/News',
          name: News,
          component: News
        },
      ]
    },
}
2017年7月12日 23:00
編輯回答
礙你眼

問題1，其實(shí)目錄是否規(guī)范，一部分取決于劃分模塊是否合理，但是你給的信息有限，只能說“比較清晰”。如果項(xiàng)目復(fù)雜起來，會(huì)有很復(fù)雜的目錄，比如說api，靜態(tài)資源，配置文件，工具類，自定義類，狀態(tài)管理和路由，然后就是各種組件了，可以參考一下網(wǎng)上一些大神的項(xiàng)目。
問題2，通常SPA都有一個(gè)頭一個(gè)腳，有的會(huì)有側(cè)邊欄，面包屑導(dǎo)航什么的。我的做法是，定義一個(gè) 容器組件：Full.vue，內(nèi)容大致如下：

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

然后路由里讓 '/'指向 Full.vue，再重定向到一個(gè) 首頁，比如叫 welcome.vue；導(dǎo)航的時(shí)候，full的子組件都會(huì)有這個(gè)頭部和頁腳了。

2017年2月6日 14:15