本文旨在介紹使用 Vue3+ElementPlus創(chuàng)建的管理后臺項目如何配置和拆分優(yōu)化路由定義

1. 根據(jù)業(yè)務模塊定義路由

1.1 把路由名稱定義成常量，方便調(diào)用保存

創(chuàng)建 src/router/route-names.ts 文件，定義常量

// src/router/route-names.ts 文件
// 登錄頁面
export const LOGIN = 'LOGIN'
// 菜單管理 ~ 建議多單詞使用 _ 連接
expot const SYSTEM_MENUS = 'SYSTEM_MENUS'

1.2 根據(jù)業(yè)務場景拆分路由模塊+同步在 src/views目錄下定義頁面組件

• 定義描述 (下面表示定義了router和views的路徑別名)

  路由	頁面組件	說明
  @router/auth/index.ts	@views/login/index.vue和 @views/p404/index	定義登錄頁面/404頁面等
  @router/system/index.ts	@views/system/menus/index.vue;@views/system/account/index.vue	系統(tǒng)管理模塊下定義菜單管理，賬戶管理等
  @router/operation/index	@views/operation/coupon/index	運營模塊下定義優(yōu)惠券管理頁面等

• 定義demo，以 system系統(tǒng)管理 為例

  • 定義組件文件 @views/system/menus/index.vue

    <script setup lang="ts">
        import { ref } from 'vue'
        import type { Ref } from 'vue'
        const msg: Ref<string> = ref('hello vue3 menus demo')
    </script>
    <template>
        <div>{{ msg }}</div>
    </template>
    <style lang="less" scoped></style>
    
    

• 注冊路由 @router/system/index.ts

  import * as routeNams from '@router/route-names'
  import type { RouteRecordRaw } from 'vue-router'
  
  const systemRoutes: RouteRecordRaw[] = [
      {
          path: '/system',
          children: [
              {
                  path: 'menus',
                  name: routeNams.MENUS,
                  component: () => import('@views/system/menus/index.vue')
              }
          ]
      }
  ]
  
  export default systemRoutes
  
  

• 把各個模塊統(tǒng)一注冊在 src/router/index.ts中

  import systemRoutes from '@router/system/index.ts'
  const router = createRouter({
      history: createWebHistory(import.meta.env.BASE_URL),
      routes: [
          // 其他路由
          ...systemRoutes
      ]
  })
  export default router
  

• 定義路由前綴[非必選]

  // src/router/index.ts
  const router = createRouter({
    // 路由前綴 prefix, 或者直接修改 BASE_URL環(huán)境變量值
      history: createWebHistory(`/prefix${import.meta.env.BASE_URL}`),
      routes: [
          // 其他路由
      ]
  })
  export default router
  

  // vite.config.ts
  export default defineConfig({
    base: '/your-prefix/', // 確保與路由中的 base 一致 或者直接修改 BASE_URL環(huán)境變量值
    // ... 其他配置
  })
  

  還需要后端同事配置 nginx 負載，一下僅供參考

  server {
      listen 80;
      server_name your-domain.com;
      root /path/to/your/dist;
      index index.html;
      location / {
          try_files $uri $uri/ /index.html; # 重要：將所有請求重定向到 index.html
      }
  }
  

• 定義路由守衛(wèi)攔截

  // src/router/index.ts
  const router = createRouter({
    // 路由前綴 prefix, 或者直接修改 BASE_URL環(huán)境變量值
    history: createWebHistory(`/prefix${import.meta.env.BASE_URL}`),
    routes: [
        // 其他路由
    ]
  })
  
  // 全局定義路由攔截守衛(wèi)
  router.beforeEach((to, from, next) => {
    const token = localStorage.getItem('token')
    if (!token) {
        next({
            name: 'LOGIN'
        })
    } else {
        next()
    }
  })
  
  export default router
  

eslint報錯說需要創(chuàng)建 muti-word 組件名，修復方式在 package.json中添加一下代碼來屏蔽錯誤。

"eslintConfig": {

"rules": {

"vue/multi-word-component-names": "off"

}

}

2. 頁面跳轉(zhuǎn)操作

2.1 跳轉(zhuǎn)方式：聲明式，編程式；

• 聲明式

  <router-link to="/user/profile">我的資料</router-link>
  <router-link :to="{ path: '/user/settings' }">系統(tǒng)設置</router-link>
  <!-- 假設路由配置為 { path: '/user/:userId', name: 'user', component: ... } 推薦使用模式 -->
  <router-link :to="{ name: 'USER', params: { userId: 123 }}">用戶123</router-link>
  <router-link :to="{ path: '/search', query: { keyword: 'Vue', category: 'frontend' }}">搜索Vue</router-link>
  <router-link :to="..." replace>下一頁（無痕）</router-link>
  <!-- exact嚴格匹配模式 -->
  <router-link to="/" exact>首頁</router-link>
  

• 編程式 詳細操作參考文檔

  // 業(yè)務組件中
  import { useRouter } from 'vue-router'
  const router = useRouter()
  // 字符串路徑
  router.push('/users/eduardo')
  
  // 帶有路徑的對象
  router.push({ path: '/users/eduardo' })
  
  // 命名的路由，并加上參數(shù)，讓路由建立 url ---推薦使用方式，name使用預設的常量名稱；
  router.push({ name: 'MENUS', params: { username: 'eduardo' } })
  
  // 帶查詢參數(shù)，結(jié)果是 /register?plan=private
  router.push({ path: '/register', query: { plan: 'private' } })
  

• 更完善的功能，需要配合 頁面布局 Layout 一起使用。

2.2 RouterView定義和使用

使用參考Routerview 插槽