vue+element ui實作側邊導航欄的路由-有解無憂

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

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

如下：

 1         <el-menu id="navMenu" :router="true" unique-opened>      
 2           <el-submenu index="1">
 3             <template slot="title"><i class="el-icon-user"></i>用戶管理</template>
 4             <el-menu-item-group>
 5               <el-menu-item index="/cat/catspage">用戶串列</el-menu-item>
 6               <el-menu-item index="/cat/catspage2">貓貓串列</el-menu-item>
 7             </el-menu-item-group> 
 8           </el-submenu>          
 9           <el-submenu index="2">
10             <template slot="title"><i class="el-icon-menu"></i>導航二</template>
11             <el-menu-item-group>
12               <template slot="title">分組一</template>
13               <el-menu-item index="2-1">選項1</el-menu-item>
14               <el-menu-item index="2-2">選項2</el-menu-item>
15             </el-menu-item-group>
16             <el-menu-item-group title="分組2">
17               <el-menu-item index="2-3">選項3</el-menu-item>
18             </el-menu-item-group>
19             <el-submenu index="2-4">
20               <template slot="title">選項4</template>
21               <el-menu-item index="2-4-1">選項4-1</el-menu-item>
22             </el-submenu>
23           </el-submenu>          
24         </el-menu>

1         <el-main id="main">         
2           <router-view></router-view>
3         </el-main>


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

在index.js中寫路由：

 1 import Vue from 'vue'
 2 import Router from 'vue-router'
 3 import HelloWorld from '@/components/HelloWorld'
 4 
 5 import Cat from '@/components/cats/Cat'
 6 import CatsPage from '@/components/cats/CatsPage'
 7 import CatsPage2 from '@/components/cats/CatsPage2'
 8 
 9 Vue.use(Router)
10 
11 export default new Router({
12   routes: [{
13       path: '/cat',
14       name: 'Cat',
15       component: Cat,
16       children:[
17         {
18           path:'/cat/',
19           name:'CatMain',
20           component:require('@/components/cats/CatMain').default
21         },{
22           path:'/cat/catspage',
23           name:'CatsPage',
24           component:CatsPage
25         },{
26           path:'/cat/catspage2',
27           name:'CatsPage2',
28           component:CatsPage2
29         },
30       ]
31     }
32   ]
33 })

有兩種方式可以設定路由，一種是寫在最前面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/’啦，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/303443.html

標籤：其他

上一篇：label系結事件觸發兩次的問題

下一篇：基于FT的FDLOAD（gpload）的資料遷移編排注意事項