likes
comments
collection
share

如何做一个五星的路由？？？

作者站长头像
站长
· 阅读数 52

在现代Web应用开发中，路由系统是构建单页面应用程序(SPA)不可或缺的一部分，它负责管理应用状态与URL之间的映射，使用户能够通过浏览器的地址栏与应用进行交互。本文将深入探讨路由功能的核心概念，特别是“五星路由功能”，涵盖路由形式的选择、懒加载、二级路由、路由守卫、错误处理、meta属性的使用、以及如何通过NProgress提升用户体验，并简要介绍History API的工作原理。

一、路由形式选择：Hash vs History

在Vue.js、React等前端框架中，常用的路由模式主要有两种：hash模式和history模式。

  • Hash模式：

    • 优点：兼容性极佳，几乎支持所有浏览器，包括一些较老的版本。URL中的#及其后面的部分不会发送到服务器，因此无需后端支持。
    • 缺点：URL不够美观，对SEO不友好，且由于浏览器的前进后退按钮通过修改hash实现，可能会影响部分用户的体验。

  • History模式：

    • 优点：提供更加自然和美观的URL，与传统的服务器端渲染应用URL结构一致，有利于SEO。
    • 缺点：依赖于HTML5的History API，旧浏览器或不支持此API的环境会遇到问题。同时，需要后端配置支持，以避免直接访问非首页URL时返回404错误。

选择建议：后台管理系统等内部工具倾向于使用history模式，因为它们通常控制着部署环境且用户群体固定。而面对公众的用户项目或需要广泛兼容性的场景，则应优先考虑hash模式。对于移动应用或现代Web项目，若不需过多考虑老旧浏览器兼容，history模式是更好的选择。

二、路由高级特性

路由懒加载

为提升首屏加载速度，可以采用路由懒加载技术，即按需加载路由对应的组件。这通过动态import()语法实现，确保用户访问某个路由时才加载对应资源。

component: ()=>import('../views/dashboard.vue')

二级路由

二级路由或多级路由设计允许创建嵌套视图，使得复杂的应用结构更加清晰，每个父级路由下可定义多个子路由。

路由守卫

  • 登录鉴权（Auth Guard） ：在路由跳转前检查用户是否已登录，未登录则重定向至登录页。
  • 角色权限（Role Guard） ：基于用户角色限制访问权限，例如只允许管理员访问特定页面。

以下是一个简单的Vue Router全局前置守卫示例，用于实现登录鉴权：

import router from './router'
import store from './store'

router.beforeEach((to, from, next) => {
  // 检查是否需要登录验证
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 检查用户是否已登录
    if (!store.getters.isLoggedIn) {
      // 未登录则重定向到登录页
      next({ name: 'Login', query: { redirect: to.fullPath } })
    } else {
      // 已登录，继续导航
      next()
    }
  } else {
    // 不需要验证的路由直接放行
    next()
  }
})

错误处理：403与404

  • 403 Forbidden：通常用于路由守卫中，拒绝无权限的访问请求。
  • 404 Not Found：捕获未匹配到任何路由的情况，显示友好错误页面。

Meta属性

  • title：动态设置页面标题，提升SEO和用户体验。
  • auth：标记页面是否需要登录认证。
  • permission：指定页面访问所需的角色权限。

三、增强用户体验：NProgress与路由钩子

NProgress是一个轻量级的进度条插件，常用于在页面切换时展示加载进度，提升用户等待时的感知。通过在router.beforeEach中启动进度条，在router.afterEach中结束，可以轻松集成到路由系统中。

router.beforeEach((to,from,next)=>{
    NProgress.start()  // 开始进度条
})
router.afterEach(()=>{
    NProgress.done()  // 结束进度条
})

如何安装NProgress

npm i element-plus
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

四、History API概览

HTML5引入的History API，包括pushState、replaceState和popstate事件，使得开发者能够在不重新加载页面的情况下操作浏览器的历史记录。这对于实现SPA的页面切换至关重要，让应用看起来更像是原生应用，而非传统网页。通过useRouter提供的方法如push、replace、go(-1)等，可以灵活操控浏览历史，实现前后导航功能。

综上所述，选择合适的路由模式、合理利用路由高级特性、优化用户体验以及正确理解并运用History API，是构建高效、用户友好的现代Web应用的关键。在实际项目中，应综合考虑业务需求、目标用户及技术条件，制定最合适的路由策略。

五、手写五星路由

接下来我们写一个后台管理系统的路由部分

import { createRouter,createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

const routes =[
    {
    path:'/',
    redirect:'/dashboard',
    },
    {
        path:'/',
        name:'Home',
        component: Home,
        children:[
            {
                path:'/dashboard',
                name:'dashboard',
                meta:{
                    title:'系统首页',
                    noAuth:true,
                },
                component: ()=>import('../views/dashboard.vue')
            },
            {
                path:'/system-user',
                name:'system-user',
                meta:{
                    title:'用户管理',
                    permiss:'11'
                },
                component: ()=>import('../views/system-user.vue')
            },
            {
                path:'/system-role',
                name:'system-role',
                meta:{
                    title:'角色管理',
                    permiss:'12'
                },
                component: ()=>import('../views/system-role.vue')
            }
        ]
    },
    {
        path:'/login',
        meta:{
            title:'登录',
            noAuth:true
        },
        component: ()=>import('../views/Login.vue')
    },
    {
        path:'/403',
        meta:{
            title:'403',
            noAuth:true
        },
        component: ()=>import('../views/403.vue')
    },
    {
        path:'/404',
        meta:{
            title:'404',
            noAuth:true
        },
        component: ()=>import('../views/404.vue')
    },
    {
        // 动态匹配，接收除上面的url以外的
        path:'/:path(.*)', //.代表模糊匹配 
        redirect:'/404'

    }

]
// url 传统url 和后端一样
// 自己人用的，浏览器不支持的话可以换，无所谓 
const router = createRouter({
    history: createWebHistory(),
    routes
})

router.beforeEach((to,from,next)=>{
    NProgress.start()  // 开始进度条
    document.title = to.meta.title //更改页面名称 这个一定要有
    const role = localStorage.getItem('ms_name') || 'admin';
    const permiss = {
        'admin':['11','12'],
        'user':['11']
    }
    if( !role && to.meta.noAuth !== true){
        next('/login')
    }else if(typeof to.meta.permiss  == 'String' && !permiss[role].includes(to.meta.permiss)){
        next('/403')
    }else{
        next() // 不需要登录或者登录了有相应的权限的页面
    }
})

router.afterEach(()=>{
    NProgress.done()  // 结束进度条
})


export default router;
转载自:https://juejin.cn/post/7392527298381021236
评论
请登录