vue+element ui實現側邊導航欄的路由

正在嘗試用vue+element做網頁，剛寫了側邊導航欄，記錄一下。

用了element中的NavMenu 導航菜單，整個側邊導航欄都可以通過官網上的代碼進行修改來實現。

如下：

        <el-menu id="navMenu" :router="true" unique-opened>      
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-user"></i>用戶管理</template>
            <el-menu-item-group>
              <el-menu-item index="/cat/catspage">用戶列表</el-menu-item>
              <el-menu-item index="/cat/catspage2">貓貓列表</el-menu-item>
            </el-menu-item-group> 
          </el-submenu>          
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-menu"></i>導航二</template>
            <el-menu-item-group>
              <template slot="title">分組一</template>
              <el-menu-item index="2-1">選項1</el-menu-item>
              <el-menu-item index="2-2">選項2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分組2">
              <el-menu-item index="2-3">選項3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="2-4">
              <template slot="title">選項4</template>
              <el-menu-item index="2-4-1">選項4-1</el-menu-item>
            </el-submenu>
          </el-submenu>          
        </el-menu>

        <el-main id="main">         
          <router-view></router-view>
        </el-main>

其中:router="true"表示開啟路由，官方文檔中有寫，開啟后可以直接用index來作為path進行路由跳轉。
在el-main中放一個<router-view></router-view>，跳轉的路由路徑寫在每一個index中。

在index.js中寫路由：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

import Cat from '@/components/cats/Cat'
import CatsPage from '@/components/cats/CatsPage'
import CatsPage2 from '@/components/cats/CatsPage2'

Vue.use(Router)

export default new Router({
  routes: [{
      path: '/cat',
      name: 'Cat',
      component: Cat,
      children:[
        {
          path:'/cat/',
          name:'CatMain',
          component:require('@/components/cats/CatMain').default
        },{
          path:'/cat/catspage',
          name:'CatsPage',
          component:CatsPage
        },{
          path:'/cat/catspage2',
          name:'CatsPage2',
          component:CatsPage2
        },
      ]
    }
  ]
})

有兩種方式可以設置路由，一種是寫在最前面import CatsPage2 from '@/components/cats/CatsPage2'

；一種是在routes的compoent里面通過require('@/components/cats/CatMain').default

Cat是主頁面，也是側邊導航欄所在的頁面。

children里面是點擊導航欄之后跳轉的頁面，也就是el-main中<router-view></router-view>指向的頁面。

這時候已經可以實現點擊導航欄顯示對應的頁面了。

 

 

 需要注意的是CatMain這部分的path，需要設置為‘/’，才能一打開頁面就顯示首頁，否則打開后el-main中是沒有內容的。

我這邊Cat的路徑是‘/cat’，所以我的首頁CatMain路徑就是‘/cat/’啦。