后端管理系統(tǒng)開發(fā)（二）：路由篇

很久很久……以前，我們開始了vue-admin-pro之旅。通過 后端管理系統(tǒng)開發(fā)（一）：登錄篇 ，實現(xiàn)登錄功能，我們打開了后臺管理系統(tǒng)的大門。本節(jié)是路由篇的講解，不管管理系統(tǒng)如何簡單，都少不了路由，所以，學(xué)習(xí)這一節(jié)，很有必要。不過呢，對于我們來說，路由就是菜單。


下面開始我們本節(jié)——路由篇的學(xué)習(xí)之旅。


1 基礎(chǔ)

讀這篇文章的，我相信大多數(shù)都是后端開發(fā)人員，可能有些學(xué)過Vue，也可能沒有，所以在之前，我們先一起學(xué)習(xí)下路由相關(guān)的知識。

如果你想了解更多，看：Vue Router 。

1.1 路由

路由就是跳轉(zhuǎn)。

聲明式：<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

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

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

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' }
  ]
})

重定向的目標(biāo)也可以是一個命名的路由：

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

甚至是一個方法，動態(tài)返回重定向目標(biāo)：

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

注意導(dǎo)航守衛(wèi)并沒有應(yīng)用在跳轉(zhuǎn)路由上，而僅僅應(yīng)用在其目標(biāo)上。在下面這個例子中，為 /a 路由添加一個 beforeEnter 守衛(wèi)并不會有任何效果。

別名：

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

1.6 路由傳參

1.6.1 通過path傳參

參數(shù)會顯示在URL上，頁面刷新，數(shù)據(jù)不會丟失。

路由配置

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

傳遞參數(shù)

//直接調(diào)用$router.push 實現(xiàn)攜帶參數(shù)的跳轉(zhuǎn)
this.$router.push({
  path: `/particulars/${id}`,
})

接收參數(shù)

this.$route.params.id

1.6.2 通過params傳參

參數(shù)不會顯示在URL上

頁面刷新，數(shù)據(jù)會丟失

路由配置

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

傳遞參數(shù)

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

接收參數(shù)

this.$route.params.id

1.6.3 通過query傳參

使用path來匹配路由，然后通過query來傳遞參數(shù)
這種情況下 query傳遞的參數(shù)會顯示在url后面?id=？

路由配置

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

傳遞參數(shù)

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

接收參數(shù)

this.$route.query.id

1.7 完整導(dǎo)航解析流程

  1. 導(dǎo)航被觸發(fā)。
  2. 在失活的組件里調(diào)用 beforeRouteLeave 守衛(wèi)。
  3. 調(diào)用全局的 beforeEach 守衛(wèi)。
  4. 在重用的組件里調(diào)用 beforeRouteUpdate 守衛(wèi) (2.2+)。
  5. 在路由配置里調(diào)用 beforeEnter。
  6. 解析異步路由組件。
  7. 在被激活的組件里調(diào)用 beforeRouteEnter。
  8. 調(diào)用全局的 beforeResolve 守衛(wèi) (2.5+)。
  9. 導(dǎo)航被確認。
  10. 調(diào)用全局的 afterEach 鉤子。
  11. 觸發(fā) DOM 更新。
  12. 調(diào)用 beforeRouteEnter 守衛(wèi)中傳給 next 的回調(diào)函數(shù)，創(chuàng)建好的組件實例會作為回調(diào)函數(shù)的參數(shù)傳入。



2 目錄結(jié)構(gòu)

.
└── src
    └── router                  // 路由目錄
        ├── before-close.js     // 頁面關(guān)閉前需要做的操作，寫在這里
        ├── index.js            // 路由策略
        └── routers.js          // 路由配置



3 標(biāo)簽

path

路勁

name

名字

meta

頁面信息配置，這是一個對象

title

標(biāo)題

hideInMenu

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

component

組件

notCache

不要緩存

icon

圖標(biāo)

hideInBread

設(shè)為true后此級路由將不會出現(xiàn)在面包屑中

redirect

跳轉(zhuǎn)



4 圖標(biāo)

你可以去 這里 篩選想要的圖標(biāo)

如果無法滿足我們的需求，可以自定義圖標(biāo)。

自定義圖標(biāo)，需要在圖標(biāo)名稱前加下劃線 _ 。

后面會用一個篇章，單獨說自定義圖標(biāo)。



5 多語言

如果你的系統(tǒng)要支持多語言，首先你要開啟多語言。

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: '數(shù)字漸變'
        },
        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')
      }
    ]
  }
]



多級菜單-效果示例
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容