vue iview-admin使用教程之路由配置 -- 齊梟飛-web前端架構
阿新 • • 發佈：2018-12-10
功執行iview-admin之後，您就可以開始動手修改它，將自己的內容替換進去了。 首先最基礎也是最重要的，應該說是路由配置，路由配置裡目前有三種類型的配置，對應三種頁面的展示
成功執行iview-admin之後，您就可以開始動手修改它，將自己的內容替換進去了。 首先最基礎也是最重要的，應該說是路由配置，路由配置裡目前有三種類型的配置，對應三種頁面的展示型別。直接來看程式碼:
./src/router.js
- 第一種型別：該頁面在整個瀏覽器區域展現，代表性的有登入頁、404頁等
export const loginRouter = {
path: '/login', //必填 name: 'login', // 必填，頁面都以name值來載入 meta: { title: 'Login - 登入' // 非必填，若不填預設顯示iview-admin（後面會介紹在哪修改預設顯示的值） }, component: resolve => { require(['./views/login.vue'], resolve); } // 必填，用來載入該路由規則對應的檢視，resolve用來控制非同步載入
};
2.第二種型別：該頁面在Main元件的子頁面區域展示，但不在左側選單欄顯示，代表性的有首頁、訊息中心等
export const otherRouter = {
path: '/', // 必填 name: 'otherRouter', // 必填，在麵包屑處理中需要用到，值固定為otherRouter（或者可以在./src/libs/util.js中修改） redirect: '/home', // 選填，這裡如果不填在瀏覽器位址列輸入域名後自動跳轉到首頁 component: Main, // 必填，主元件，用於載入側邊欄和右側面包屑、標籤欄、工具條、子頁面路由檢視等 children: [ // 在Main右側檢視顯示的頁面都要作為otherRouter的children來新增 { // home頁面 path: 'home', // 必填，在位址列將以 '域名/home'的的形式呈現 title: '首頁', // 必填，這個title會在標籤欄顯示 name: 'home_index', // 必填，該頁面是通過name值來載入的，切記每個路由物件的名字都要和其他的不一樣 component: resolve => { require(['./views/home/home.vue'], resolve); } // 必填 } ]
};
3.第三種類型：該頁面子昂Main元件的子頁面區域展示，且在左側選單欄顯示，對應有兩種情況
export const appRouter = [
{ // a.第一種情況：只有一級選單 path: '/access', // 必填 redirect: '/access/index', // 選填，如果不填也會跳轉到這個路徑 icon: 'key', // 必填，此icon將顯示在左側選單欄 name: 'access', // 必填 title: '許可權管理', // 必填，此title值將顯示在左側選單欄 component: Main, // 必填，且固定，用於載入Main元件 children: [ // 要顯示在右側區域的頁面必須作為children來新增 { path: 'index', // 必填 title: '許可權管理', // 必填，將顯示在標籤欄對應標籤 name: 'access_index', // 必填，且不能和其父路由的name不一致（與其他任何路由的name值都不能一致） component: resolve => { require(['./views/access/access.vue'], resolve); } // 必填 } ] }, { // b.第二種情況：有二級選單 path: '/component', // 必填 redirect: '/component/text-editor', // 選填，如果不填在位址列輸入'域名/access'時將預設開啟此一級選單對應的第一個二級選單頁面 icon: 'social-buffer', // 必填，同上 name: 'component', // 必填，同上 title: '元件', // 必填，同上 component: Main, // 必填，同上 children: [ // 必填，同上 { path: 'text-editor', // 必填，同上 icon: 'compose', // 必填，同上 name: 'text-editor', // 必填，同上 title: '富文字編輯器', // 必填，將顯示在左側選單欄二級選單 component: resolve => { require(['./views/my_components/text-editor/text-editor.vue'], resolve); } // 必填 }, { path: 'md-editor', // 必填，同上 icon: 'pound', // 必填，同上 name: 'md-editor', // 必填，同上 title: 'Markdown編輯器', // 必填，同上 component: resolve => { require(['./views/my_components/markdown-editor/markdown-editor.vue'], resolve); } }, // 必填 ] }
}
您還可以為頁面配置許可權，在左側選單初始化的時候，會通過當前登入使用者的許可權值來過濾路由配置，從而決定在左側選單欄顯示哪些選項。許可權配置很簡單，只需在路由物件裡設定’access’屬性即可：
{
path: '/access-test',
icon: 'lock-combination',
title: '許可權測試頁',
name: 'accesstest',
access: 0, // 如果設定access值，那麼當登入使用者的許可權值不為0時則該選單及其二級選單都不會出現在左側選單欄；
// 如果不設定access值，那麼該選單預設顯示；
// access如果只有一個許可權值過濾，那麼直接寫一個數字即可（如這的0）,如果有多個，則寫成陣列型別（如[0,1]）。
component: Main,
children: [
{ path: 'index', title: '許可權測試頁', name: 'accesstest_index' }
]
},