vue動態路由有哪兩種實現方法

vue動態路由的兩種實現方法：1、簡單的角色路由設定，比如只涉及到管理員和普通使用者的許可權；通常直接在前端進行簡單的角色許可權設定。2、複雜的路由許可權設定，比如OA系統、多種角色的許可權設定；通常需要後端返回路由列表，前端渲染使用。

本教學操作環境：windows7系統、vue3版，DELL G3電腦。

動態路由不同於常見的靜態路由，可以根據不同的「因素」而改變站點路由列表。

動態路由設定一般有兩種：

(1)、簡單的角色路由設定：比如只涉及到管理員和普通使用者的許可權。通常直接在前端進行簡單的角色許可權設定

(2)、複雜的路由許可權設定：比如OA系統、多種角色的許可權設定。通常需要後端返回路由列表，前端渲染使用

1、簡單的角色路由設定

（1）設定專案路由許可權

// router.js
import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/layout'
Vue.use(Router)// 許可權路由列表
let asyncRoutes = [
    {
        path: '/permission',
        component: Layout,
        redirect: '/permission/page',
        alwaysShow: true, 
        name: 'Permission',
        meta: {
            title: 'Permission',
            roles: ['admin', 'editor'] // 普通的使用者角色
        },
        children: [
            {
                path: 'page',
                component: () => import('@/views/permission/page'),
                name: 'PagePermission',
                meta: {
                    title: 'Page',
                    roles: ['editor']  //  editor角色的使用者才能存取該頁面
                }
            },
            {
                path: 'role',
                component: () => import('@/views/permission/role'),
                name: 'RolePermission',
                meta: {
                    title: 'Role',
                    roles: ['admin']    //  admin角色的使用者才能存取該頁面
                }
            }
        ]
    },
 ]
 // 靜態路由
 let defaultRouter = [{
    path: '/404',
    name: '404',
    component: () => import('@/views/404'),
     meta: {
        title: '404'
    }
}]
let router = new Router({
    mode: 'history',
    scrollBehavior: () => ({ y: 0 }),
    routes: defaultRouter
})
export default router
登入後複製

（2）新建一個公共的asyncRouter.js檔案

// asyncRouter.js
//判斷當前角色是否有存取許可權
function hasPermission(roles, route) {
  if (route.meta && route.meta.roles) {
    return roles.some(role => route.meta.roles.includes(role))
  } else {
    return true
  }
}

// 遞迴過濾非同步路由表，篩選角色許可權路由
export function filterAsyncRoutes(routes, roles) {
  const res = [];
  routes.forEach(route => {
    const tmp = { ...route }
    if (hasPermission(roles, tmp)) {
      if (tmp.children) {
        tmp.children = filterAsyncRoutes(tmp.children, roles)
      }
      res.push(tmp)
    }
  })

  return res
}
登入後複製

（3）建立路由守衛：建立公共的permission.js檔案，設定路由守衛

import router from './router'
import store from './store'
import NProgress from 'nprogress' // 進度條外掛
import 'nprogress/nprogress.css' // 進度條樣式
import { getToken } from '@/utils/auth' 
import { filterAsyncRoutes } from '@/utils/asyncRouter.js'
NProgress.configure({ showSpinner: false }) // 進度條設定
const whiteList = ['/login'] 
router.beforeEach(async (to, from, next) => {
    // 進度條開始
    NProgress.start()
     // 獲取路由 meta 中的title，並設定給頁面標題
    document.title = to.meta.title    // 獲取使用者登入的token
    const hasToken = getToken()
    // 判斷當前使用者是否登入
    if (hasToken) {
        if (to.path === '/login') {
            next({ path: '/' })
            NProgress.done()
        } else {
            // 從store中獲取使用者角色
            const hasRoles = store.getters.roles && store.getters.roles.length > 0  
            if (hasRoles) {
                next()
            } else {
                try {
                    // 獲取使用者角色
                    const roles = await store.state.roles                    // 通過使用者角色，獲取到角色路由表
                    const accessRoutes = filterAsyncRoutes(await store.state.routers,roles)
                    // 動態新增路由到router內
                    router.addRoutes(accessRoutes)
                    next({ ...to, replace: true })
                } catch (error) {
                    // 清除使用者登入資訊後，回跳到登入頁去
                    next(`/login?redirect=${to.path}`)
                    NProgress.done()
                }
            }
        }
    } else {
        // 使用者未登入
        if (whiteList.indexOf(to.path) !== -1) {
            // 需要跳轉的路由是否是whiteList中的路由，若是，則直接條狀
            next()
        } else {
            // 需要跳轉的路由不是whiteList中的路由，直接跳轉到登入頁
            next(`/login?redirect=${to.path}`)
            // 結束精度條
            NProgress.done()
        }
    }})
    router.afterEach(() => {
    // 結束精度條
    NProgress.done()
   })
登入後複製

（4）在main.js中引入permission.js檔案

（5）在login登入的時候將roles儲存到store中

2、複雜的路由許可權設定（後端動態返回路由資料）

（1）設定專案路由檔案，該檔案中沒有路由，或者存在一部分公共路由，即沒有許可權的路由

import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/layout';
Vue.use(Router)// 設定專案中沒有涉及許可權的公共路由
export const constantRoutes = [
    {
        path: '/login',
        component: () => import('@/views/login'),
        hidden: true
    },
    {
        path: '/404',
        component: () => import('@/views/404'),
        hidden: true
    },
]
const createRouter = () => new Router({
    mode: 'history',
    scrollBehavior: () => ({ y: 0 }),
    routes: constantRoutes
})
const router = createRouter()
export function resetRouter() {
    const newRouter = createRouter()
    router.matcher = newRouter.matcher
}
export default router
登入後複製

（2）新建一個公共的asyncRouter.js檔案

// 引入路由檔案這種的公共路由
import { constantRoutes } from '../router';// Layout 元件是專案中的主頁面，切換路由時，僅切換Layout中的元件
import Layout from '@/layout';
export function getAsyncRoutes(routes) {
    const res = []
    // 定義路由中需要的自定名
    const keys = ['path', 'name', 'children', 'redirect', 'meta', 'hidden']
    // 遍歷路由陣列去重組可用的路由
    routes.forEach(item => {
        const newItem = {};
        if (item.component) {
            // 判斷 item.component 是否等於 'Layout',若是則直接替換成引入的 Layout 元件
            if (item.component === 'Layout') {
                newItem.component = Layout
            } else {
            //  item.component 不等於 'Layout',則說明它是元件路徑地址，因此直接替換成路由引入的方法
                newItem.component = resolve => require([`@/views/${item.component}`],resolve)
                
                // 此處用reqiure比較好，import引入變數會有各種莫名的錯誤
                // newItem.component = (() => import(`@/views/${item.component}`));
            }
        }
        for (const key in item) {
            if (keys.includes(key)) {
                newItem[key] = item[key]
            }
        }
        // 若遍歷的當前路由存在子路由，需要對子路由進行遞迴遍歷
        if (newItem.children && newItem.children.length) {
            newItem.children = getAsyncRoutes(item.children)
        }
        res.push(newItem)
    })
    // 返回處理好且可用的路由陣列
    return res
 }
登入後複製

（3）建立路由守衛：建立公共的permission.js檔案，設定路由守衛

//  進度條引入設定如上面第一種描述一樣
import router from './router'
import store from './store'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import { getToken } from '@/utils/auth' // get token from cookie
import { getAsyncRoutes } from '@/utils/asyncRouter'
const whiteList = ['/login'];
router.beforeEach( async (to, from, next) => {
    NProgress.start()
    document.title = to.meta.title;
    // 獲取使用者token，用來判斷當前使用者是否登入
    const hasToken = getToken()
    if (hasToken) {
        if (to.path === '/login') {
            next({ path: '/' })
            NProgress.done()
        } else {
            //非同步獲取store中的路由
            let route = await store.state.addRoutes;
            const hasRouters = route && route.length>0;
            //判斷store中是否有路由，若有，進行下一步
            if ( hasRouters ) {
                next()
            } else {
                //store中沒有路由，則需要獲取獲取非同步路由，並進行格式化處理
                try {
                    const accessRoutes = getAsyncRoutes(await store.state.addRoutes );
                    // 動態新增格式化過的路由
                    router.addRoutes(accessRoutes);
                    next({ ...to, replace: true })
                } catch (error) {
                    // Message.error('出錯了')
                    next(`/login?redirect=${to.path}`)
                    NProgress.done()
                }
            }
        }
    } else {
        if (whiteList.indexOf(to.path) !== -1) {
            next()
        } else {
            next(`/login?redirect=${to.path}`)
            NProgress.done()
        }
    }})router.afterEach(() => {
    NProgress.done()
 })
登入後複製

（4）在main.js中引入permission.js檔案

（5）在login登入的時候將路由資訊儲存到store中

//  登入介面呼叫後，呼叫路由介面，後端返回相應使用者的路由res.router，我們需要儲存到store中，方便其他地方拿取
this.$store.dispatch("addRoutes", res.router);
登入後複製

到這裡，整個動態路由就可以走通了，但是頁面跳轉、路由守衛處理是非同步的，會存在動態路由新增後跳轉的是空白頁面，這是因為路由在執行next()時，router裡面的資料還不存在，此時，你可以通過window.location.reload()來重新整理路由
後端返回的路由格式：

routerList = [
  {
        "path": "/other",
        "component": "Layout",
        "redirect": "noRedirect",
        "name": "otherPage",
        "meta": {
            "title": "測試",
        },
        "children": [
            {
                "path": "a",
                "component": "file/a",
                "name": "a",
                "meta": { "title": "a頁面", "noCache": "true" }
            },
            {
                "path": "b",
                "component": "file/b",
                "name": "b",
                "meta": { "title": "b頁面", "noCache": "true" }
            },
        ]
    }
]
登入後複製

注意：vue是單頁面應用程式，所以頁面一重新整理資料部分資料也會跟著丟失，所以我們需要將store中的資料儲存到本地，才能保證路由不丟失。

【相關推薦：、】

以上就是vue動態路由有哪兩種實現方法的詳細內容，更多請關注TW511.COM其它相關文章！