What are the two implementation methods of vue dynamic routing?-Front-end Q&A-php.cn

Two implementation methods of vue dynamic routing: 1. Simple role routing settings, such as only involving the permissions of administrators and ordinary users; usually simple role permission settings are performed directly on the front end. 2. Complex routing permission settings, such as OA system and permission configuration for multiple roles; usually the backend needs to return the routing list and the front-end rendering is used.

What are the two implementation methods of vue dynamic routing?

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.

Dynamic routing is different from common static routing. The site routing list can be changed according to different "factors".

There are generally two types of dynamic routing settings:

(1) Simple role routing settings: For example, it only involves the permissions of administrators and ordinary users. Usually simple role permission settings are performed directly on the front end

(2), complex routing permission settings: such as OA system, permission configuration for multiple roles. Usually the backend is required to return the routing list, and the front-end rendering uses

1. Simple role routing settings

(1) Configure project routing permissions

// router.js
import Vue from &#39;vue&#39;
import Router from &#39;vue-router&#39;
import Layout from &#39;@/layout&#39;
Vue.use(Router)// 权限路由列表
let asyncRoutes = [
    {
        path: &#39;/permission&#39;,
        component: Layout,
        redirect: &#39;/permission/page&#39;,
        alwaysShow: true, 
        name: &#39;Permission&#39;,
        meta: {
            title: &#39;Permission&#39;,
            roles: [&#39;admin&#39;, &#39;editor&#39;] // 普通的用户角色
        },
        children: [
            {
                path: &#39;page&#39;,
                component: () => import(&#39;@/views/permission/page&#39;),
                name: &#39;PagePermission&#39;,
                meta: {
                    title: &#39;Page&#39;,
                    roles: [&#39;editor&#39;]  //  editor角色的用户才能访问该页面
                }
            },
            {
                path: &#39;role&#39;,
                component: () => import(&#39;@/views/permission/role&#39;),
                name: &#39;RolePermission&#39;,
                meta: {
                    title: &#39;Role&#39;,
                    roles: [&#39;admin&#39;]    //  admin角色的用户才能访问该页面
                }
            }
        ]
    },
 ]
 // 静态路由
 let defaultRouter = [{
    path: &#39;/404&#39;,
    name: &#39;404&#39;,
    component: () => import(&#39;@/views/404&#39;),
     meta: {
        title: &#39;404&#39;
    }
}]
let router = new Router({
    mode: &#39;history&#39;,
    scrollBehavior: () => ({ y: 0 }),
    routes: defaultRouter
})
export default router

Copy after login

(2) Create a new public asyncRouter.js file

// 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
}

Copy after login

(3) Create a routing guard: Create a public permission.js file and set the routing guard

import router from &#39;./router&#39;
import store from &#39;./store&#39;
import NProgress from &#39;nprogress&#39; // 进度条插件
import &#39;nprogress/nprogress.css&#39; // 进度条样式
import { getToken } from &#39;@/utils/auth&#39; 
import { filterAsyncRoutes } from &#39;@/utils/asyncRouter.js&#39;
NProgress.configure({ showSpinner: false }) // 进度条配置
const whiteList = [&#39;/login&#39;] 
router.beforeEach(async (to, from, next) => {
    // 进度条开始
    NProgress.start()
     // 获取路由 meta 中的title，并设置给页面标题
    document.title = to.meta.title    // 获取用户登录的token
    const hasToken = getToken()
    // 判断当前用户是否登录
    if (hasToken) {
        if (to.path === &#39;/login&#39;) {
            next({ path: &#39;/&#39; })
            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()
   })

Copy after login

( 4) Introduce the permission.js file into main.js

(5) Store roles in the store when logging in

2. Complex routing permissions Settings (the backend dynamically returns routing data)

(1) Configure the project routing file. There are no routes in the file, or there are some public routes, that is, routes without permissions

import Vue from &#39;vue&#39;
import Router from &#39;vue-router&#39;
import Layout from &#39;@/layout&#39;;
Vue.use(Router)// 配置项目中没有涉及权限的公共路由
export const constantRoutes = [
    {
        path: &#39;/login&#39;,
        component: () => import(&#39;@/views/login&#39;),
        hidden: true
    },
    {
        path: &#39;/404&#39;,
        component: () => import(&#39;@/views/404&#39;),
        hidden: true
    },
]
const createRouter = () => new Router({
    mode: &#39;history&#39;,
    scrollBehavior: () => ({ y: 0 }),
    routes: constantRoutes
})
const router = createRouter()
export function resetRouter() {
    const newRouter = createRouter()
    router.matcher = newRouter.matcher
}
export default router

Copy after login

(2) Create a new public asyncRouter.js file

// 引入路由文件这种的公共路由
import { constantRoutes } from &#39;../router&#39;;// Layout 组件是项目中的主页面，切换路由时，仅切换Layout中的组件
import Layout from &#39;@/layout&#39;;
export function getAsyncRoutes(routes) {
    const res = []
    // 定义路由中需要的自定名
    const keys = [&#39;path&#39;, &#39;name&#39;, &#39;children&#39;, &#39;redirect&#39;, &#39;meta&#39;, &#39;hidden&#39;]
    // 遍历路由数组去重组可用的路由
    routes.forEach(item => {
        const newItem = {};
        if (item.component) {
            // 判断 item.component 是否等于 &#39;Layout&#39;,若是则直接替换成引入的 Layout 组件
            if (item.component === &#39;Layout&#39;) {
                newItem.component = Layout
            } else {
            //  item.component 不等于 &#39;Layout&#39;,则说明它是组件路径地址，因此直接替换成路由引入的方法
                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
 }

Copy after login

(3) Create a routing guard: Create a public permission.js file and set the routing guard

//  进度条引入设置如上面第一种描述一样
import router from &#39;./router&#39;
import store from &#39;./store&#39;
import NProgress from &#39;nprogress&#39; // progress bar
import &#39;nprogress/nprogress.css&#39; // progress bar style
import { getToken } from &#39;@/utils/auth&#39; // get token from cookie
import { getAsyncRoutes } from &#39;@/utils/asyncRouter&#39;
const whiteList = [&#39;/login&#39;];
router.beforeEach( async (to, from, next) => {
    NProgress.start()
    document.title = to.meta.title;
    // 获取用户token，用来判断当前用户是否登录
    const hasToken = getToken()
    if (hasToken) {
        if (to.path === &#39;/login&#39;) {
            next({ path: &#39;/&#39; })
            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(&#39;出错了&#39;)
                    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()
 })

Copy after login

(4) In Introduce the permission.js file into main.js

(5) Store the routing information in the store when logging in

//  登录接口调用后，调用路由接口，后端返回相应用户的路由res.router，我们需要存储到store中，方便其他地方拿取
this.$store.dispatch("addRoutes", res.router);

Copy after login

At this point, the entire dynamic routing can go through, but Page jumps and route guard processing are asynchronous. There may be a blank page that jumps after adding a dynamic route. This is because when the route executes next(), the data in the router does not exist yet. At this time, you can use the window .location.reload() to refresh the route
The route format returned by the backend:

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" }
            },
        ]
    }
]

Copy after login

Note: Vue is a single-page application, so part of the data will be lost as soon as the page is refreshed, so we need Only by storing the data in the store locally can the route not be lost.

[Related recommendations: vuejs video tutorial, web front-end development]

The above is the detailed content of What are the two implementation methods of vue dynamic routing?. For more information, please follow other related articles on the PHP Chinese website!