後端管理系統開發（二）：路由篇

時間 2021-04-14

標籤 html vue ios 編程 segmentfault 後端瀏覽器緩存 iview 異步欄目系統網絡简体版

原文原文鏈接

好久好久……之前，咱們開始了vue-admin-pro之旅。經過後端管理系統開發（一）：登陸篇，實現登陸功能，咱們打開了後臺管理系統的大門。本節是路由篇的講解，無論管理系統如何簡單，都少不了路由，因此，學習這一節，頗有必要。不過呢，對於咱們來講，路由就是菜單。html

下面開始咱們本節——路由篇的學習之旅。vue

1 基礎

讀這篇文章的，我相信大多數都是後端開發人員，可能有些學過Vue，也可能沒有，因此在以前，咱們先一塊兒學習下路由相關的知識。ios

若是你想了解更多，看：Vue Router 。編程

1.1 路由

路由就是跳轉。segmentfault

聲明式：<router-link :to="...">後端

編程式：router.push(...)瀏覽器

1.2 router.push

以下示例：緩存

// 字符串
router.push('home')

// 對象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
router.push({ path: `/user/${userId}` }) // -> /user/123

// 帶查詢參數，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

router.replace 不會向 history 添加新記錄 = <router-link :to="..." replace>iview

1.3 router.go(n)

後退多少步，等於 window.history.go(n)異步

以下示例：

// 在瀏覽器記錄中前進一步，等同於 history.forward()
router.go(1)

// 後退一步記錄，等同於 history.back()
router.go(-1)

// 前進 3 步記錄
router.go(3)

// 若是 history 記錄不夠用，那就默默地失敗唄
router.go(-100)
router.go(100)

1.4 命名路由

router.push({ name: 'user', params: { userId: 123 } })

1.5 重定向

重定向也是經過 routes 配置來完成，下面例子是從 /a 重定向到 /b：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

重定向的目標也能夠是一個命名的路由：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

甚至是一個方法，動態返回重定向目標：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // 方法接收 目標路由 做爲參數
      // return 重定向的 字符串路徑/路徑對象
    }}
  ]
})

注意導航守衛並無應用在跳轉路由上，而僅僅應用在其目標上。在下面這個例子中，爲 /a 路由添加一個 beforeEnter 守衛並不會有任何效果。

別名：

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

1.6 路由傳參

1.6.1 經過path傳參

參數會顯示在URL上，頁面刷新，數據不會丟失。

路由配置

{
  path: '/particulars/:id',
  name: 'particulars',
  component: particulars
}

傳遞參數

//直接調用$router.push 實現攜帶參數的跳轉
this.$router.push({
  path: `/particulars/${id}`,
})

接收參數

this.$route.params.id

1.6.2 經過params傳參

參數不會顯示在URL上

頁面刷新，數據會丟失

路由配置

{
  path: '/particulars',
  name: 'particulars',
  component: particulars
}

傳遞參數

this.$router.push({
  name: 'particulars',
  params: {
    id: id
  }
})

接收參數

this.$route.params.id

1.6.3 經過query傳參

使用path來匹配路由，而後經過query來傳遞參數
這種狀況下 query傳遞的參數會顯示在url後面?id=？

路由配置

{
  path: '/particulars',
  name: 'particulars',
  component: particulars
}

傳遞參數

this.$router.push({
  path: '/particulars',
  query: {
    id: id
  }
})

接收參數

this.$route.query.id

1.7 完整導航解析流程

導航被觸發。
在失活的組件裏調用 beforeRouteLeave 守衛。
調用全局的 beforeEach 守衛。
在重用的組件裏調用 beforeRouteUpdate 守衛 (2.2+)。
在路由配置裏調用 beforeEnter。
解析異步路由組件。
在被激活的組件裏調用 beforeRouteEnter。
調用全局的 beforeResolve 守衛 (2.5+)。
導航被確認。
調用全局的 afterEach 鉤子。
觸發 DOM 更新。
調用 beforeRouteEnter 守衛中傳給 next 的回調函數，建立好的組件實例會做爲回調函數的參數傳入。

2 目錄結構

.
└── src
    └── router                  // 路由目錄
        ├── before-close.js     // 頁面關閉前須要作的操做，寫在這裏
        ├── index.js            // 路由策略
        └── routers.js          // 路由配置

3 標籤

path

路勁

name

名字

title

標題

hideInMenu

是否在菜單中隱藏，布爾類型，true：隱藏；false：顯示。默認：顯示。

component

組件

notCache

不要緩存

icon

圖標

hideInBread

設爲true後此級路由將不會出如今麪包屑中

redirect

跳轉

4 圖標

你能夠去這裏篩選想要的圖標

若是沒法知足咱們的需求，能夠自定義圖標。

自定義圖標，須要在圖標名稱前加下劃線 _ 。

後面會用一個篇章，單獨說自定義圖標。

5 多語言

若是你的系統要支持多語言，首先你要開啓多語言。

1：將 ./src/config/index.js 配置文件中的多語言支持開啓： useI18n=true 。

2：多語言文件在 ./src/local 目錄下。

6 單獨頁

export default [
  {
    path: '/login',
    name: 'login',
    meta: {
      title: 'Login - 登陸',
      hideInMenu: true
    },
    component: () => import('@/view/Login/Login')
  }
]

7 一級菜單

export default [
  {
    path: '/tools_methods',
    name: 'tools_methods',
    meta: {
      hideInBread: true
    },
    component: Main,
    children: [
      {
        path: 'tools_methods_page',
        name: 'tools_methods_page',
        meta: {
          icon: 'ios-hammer',
          title: '工具方法',
          beforeCloseName: 'before_close_normal'
        },
        component: () => import('@/view/tools-methods/tools-methods.vue')
      }
    ]
  },
]

8 二級菜單

export default [
  {
    path: '/components',
    name: 'components',
    meta: {
      icon: 'logo-buffer',
      title: '組件'
    },
    component: Main,
    children: [
      {
        path: 'tree_select_page',
        name: 'tree_select_page',
        meta: {
          icon: 'md-arrow-dropdown-circle',
          title: '樹狀下拉選擇器'
        },
        component: () => import('@/view/components/tree-select/index.vue')
      },
      {
        path: 'count_to_page',
        name: 'count_to_page',
        meta: {
          icon: 'md-trending-up',
          title: '數字漸變'
        },
        component: () => import('@/view/components/count-to/count-to.vue')
      }
    ]
  }
]

效果示例：

9 多級菜單

export default [
  {
    path: '/multilevel',
    name: 'multilevel',
    meta: {
      icon: 'md-menu',
      title: '多級菜單'
    },
    component: Main,
    children: [
      {
        path: 'level_2_1',
        name: 'level_2_1',
        meta: {
          icon: 'md-funnel',
          title: '二級-1'
        },
        component: () => import('@/view/multilevel/level-2-1.vue')
      },
      {
        path: 'level_2_2',
        name: 'level_2_2',
        meta: {
          access: ['super_admin'],
          icon: 'md-funnel',
          showAlways: true,
          title: '二級-2'
        },
        component: parentView,
        children: [
          {
            path: 'level_2_2_1',
            name: 'level_2_2_1',
            meta: {
              icon: 'md-funnel',
              title: '三級'
            },
            component: () => import('@/view/multilevel/level-2-2/level-2-2-1.vue')
          },
          {
            path: 'level_2_2_2',
            name: 'level_2_2_2',
            meta: {
              icon: 'md-funnel',
              title: '三級'
            },
            component: () => import('@/view/multilevel/level-2-2/level-2-2-2.vue')
          }
        ]
      },
      {
        path: 'level_2_3',
        name: 'level_2_3',
        meta: {
          icon: 'md-funnel',
          title: '二級-3'
        },
        component: () => import('@/view/multilevel/level-2-3.vue')
      }
    ]
  }
]

效果示例：