熟练掌握这八个路由要点，轻松玩转路由！

一拳干爆显示器2024-07-18 14:08

五星路由⭐⭐⭐⭐⭐

一、两种路由的优缺点

Hash 路由

优点：

  1. 兼容性好：几乎所有的浏览器都支持，不需要服务器端配置。
  2. 简单易用 ：通过 URL 中的 # 来实现路由跳转，易于理解和实现。
  3. SEO 友好：由于 URL 变化不会导致页面重新加载，可以使用传统的服务器端渲染技术来优化 SEO。

缺点：

  1. URL 形式 ：包含 #，看起来不够美观，且在某些情况下可能会影响用户体验。
  2. 限制性 ：URL 中的 # 可能会被浏览器的某些功能（如书签、历史记录）误处理。

适用场景：

  • 面向用户的产品，尤其是那些不依赖于 URL 直接访问的单页应用（SPA）。
  • 需要在不同设备上运行的应用，如 PC 和移动设备。

History 路由

优点：

  1. URL 形式美观 ：URL 看起来更自然，没有 #，更符合传统网站的 URL 格式。
  2. 与后端路由一致：可以利用浏览器的历史记录 API，实现更自然的页面导航和刷新。
  3. 更好的用户体验：用户可以通过浏览器的前进和后退按钮导航，体验更流畅。

缺点：

  1. 兼容性问题：需要服务器端配置支持，否则可能会出现 404 错误。
  2. 实现复杂：需要处理服务器端的路由重写，以确保所有路由都能正确映射到前端应用。

适用场景：

  • 后台系统：通常不需要考虑 SEO，且需要更自然的 URL 格式。
  • 移动项目：现代移动设备和浏览器对 history 路由的支持较好，可以提供更好的用户体验。

总结

hash 兼容性好，但形式不好（有#），history 兼容性差，但形式好，和后端路由一致 使用哪一种就结合项目分析：做后台系统就使用history，面向用户项目，使用hash，但用户端是移动项目不太需要兼容性用history也可以

二、路由的懒加载

路由懒加载是一种优化单页应用（SPA）性能的技术，它允许应用在需要时才加载路由组件，而不是一次性加载所有组件。这可以显著减少初始加载时间，并提高应用的响应速度。

js 复制代码 
import Home from '../views/Home.vue'
routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
    }，
    {
      path: '/system-role',
      name: 'system-role',
      component: () => import( '../views/system-role.vue')
    },
]

第一种为命名视图（Named Views）

第二种为动态导入（Dynamic Imports）

区别

  1. 加载时机 ：
    • 动态导入：组件在路由被访问时才加载，实现按需加载。
    • 命名视图：应用启动时即加载所有组件，初始加载时间较长。
  2. 代码结构 ：
    • 动态导入：需要使用箭头函数动态导入组件，代码稍显复杂。
    • 命名视图：直接将组件赋值给 component 属性，代码更简洁。
  3. 性能优化 ：
    • 动态导入：可以显著减少应用的初始加载时间，提高应用的响应速度。
    • 命名视图：虽然代码更简洁，但不利于应用的初始加载性能优化。
  4. 适用场景 ：
    • 动态导入：适用于大型应用或需要按需加载组件的场景。
    • 命名视图：适用于小型应用或组件较少的应用，或者对初始加载时间不敏感的场景。

三、二级路由

二级路由（也称为嵌套路由或子路由）是 Vue Router 中的一种路由配置方式，它允许你在一个父路由下定义多个子路由。这种方式非常适合用来构建具有多级导航结构的单页应用（SPA）。

js 复制代码 
{
      path: '/',
      name: 'Home',
      component: Home,
      children:[
        {
          path: '/dashboard',
          name: 'dashboard',
          meta: {
            title: '系统首页',
            // permiss:'1',
            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')
        },
      ]
    },

在该篇文章中详细介绍了 通过使用路由管理器（Vue Router）构建单页面应用，小小实战管理系统的后台 - 掘金 (juejin.cn)

四、路由守卫

路由守卫是 Vue Router 中的一种机制，用于在路由跳转前后执行一些逻辑。它们可以用于权限验证、数据获取、页面标题设置等。以下是一些常见的路由守卫：

  • 全局前置守卫（router.beforeEach） ：在每次路由跳转之前执行，可以全局应用。
  • 全局解析守卫（router.beforeResolve） ：在 beforeEach 守卫和所有组件守卫之后执行，可以用于依赖路由的异步数据获取。
  • 全局后置守卫（router.afterEach） ：在每次路由跳转完成后执行，可以用于加载动画的停止等。

列举一段 Vue Router 的全局前置守卫（router.beforeEach）代码，它在每次路由跳转之前执行。其主要作用是在路由跳转前对用户进行权限验证，并根据验证结果决定是否允许访问目标路由。

js 复制代码 
router.beforeEach((to, from, next) => {
    document.title = to.meta.title
    const role = localStorage.getItem("ms_name") || '';
    const permiss = {
        'admin': ['1', '11', '12'],
        'user': ['1', '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()// 不需要登录，或者登陆了且有相应的权限
    }
})

代码分析

  1. 设置页面标题 :

    javascript 复制代码 
    document.title = to.meta.title;

将当前路由对象 to 的 meta.title 属性设置为浏览器的文档标题，从而在每次路由跳转时更新页面标题。

  1. 获取用户角色 :

    javascript 复制代码 
    const role = localStorage.getItem("ms_name") || '';

从本地存储中获取名为 ms_name 的项，如果不存在则默认角色为空字符串。判断用户是否已经登录。

  1. 定义角色权限 :

    js 复制代码 
    const permiss = {
    'admin': ['1', '11', '12'],
    'user': ['1', '11']
};

定义一个对象 permiss，包含了不同角色的权限列表。例如，admin 角色拥有权限 '1'、'11' 和 '12'，而 user 角色拥有权限 '1' 和 '11'。

  1. 权限验证逻辑 :

    javascript 复制代码 
    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(); // 不需要登录，或者登陆了且有相应的权限
}

包含两个条件判断：

  • 第一个 if 语句 ：检查用户角色是否未定义（即用户未登录），并且目标路由 to 不允许未认证访问（即 to.meta.noAuth 不等于 true）。如果这两个条件都满足，用户将被重定向到登录页面（/login）。
  • 第二个 else if 语句 ：检查目标路由的 meta.permiss 属性是否是一个字符串，并且当前用户的角色权限不包含这个权限。如果用户没有相应的权限，用户将被重定向到403错误页面。
  • 最后一个 else 语句 ：如果以上条件都不满足，即用户已经登录，并且要么当前路由不需要认证（to.meta.noAuth 为 true），要么用户拥有访问当前路由所需的权限，则调用 next() 继续路由跳转。

路由守卫的作用

  1. 权限验证：通过检查用户角色和目标路由的权限要求，确保只有具有相应权限的用户才能访问特定的路由。
  2. 重定向：在用户未登录或没有足够权限的情况下，将用户重定向到登录页面或403错误页面，从而防止未授权访问。
  3. 页面标题设置：在每次路由跳转时更新页面标题，提高用户体验。

处理情况

  • 用户未登录且访问需要认证的路由：重定向到登录页面。
  • 用户已登录但访问需要更高权限的路由：重定向到403错误页面。
  • 用户已登录且访问的路由不需要认证或用户有相应权限：继续路由跳转。

五、403 404

一个合格的项目得有403和404两种常见的HTTP状态码，分别表示不同的错误或状态

  • 403 Forbidden：表示服务器理解请求客户端的请求，但拒绝授权。也就是说，服务器理解了请求，但拒绝执行它。这通常是由于权限问题，比如用户没有足够的权限访问某个资源。
  • 404 Not Found：表示服务器没有找到请求的资源。也就是说，服务器无法找到请求的文件或页面。这通常是因为请求的URL不正确，或者服务器上没有该资源。

六、meta 用法

meta 是一个路由对象的属性，它允许你将额外的信息与路由关联起来。这些信息可以用于多种目的，比如权限控制、页面标题设置、面包屑导航等。

在给出的示例中，展示了如何在路由守卫中使用 meta 字段：

javascript 复制代码 
const routes = [
  {
    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')
      }
    ]
  },

在这个示例中：

  • meta.title 用于设置页面标题。
  • meta.noAuth 表示该路由是否需要认证。
  • meta.permiss 表示访问该路由需要的权限标识。

通过这种方式，你可以灵活地在路由中添加额外的信息，并在路由守卫中使用这些信息来实现复杂的逻辑。

作用

  1. 页面标题设置：
  • 你可以在 meta 中定义一个 title 字段，然后在路由守卫中使用这个字段来动态设置页面标题。例如：
javascript 复制代码 
{
       path: 'dashboard',
       name: 'dashboard',
       meta: {
         title: '系统首页',
         noAuth: true  // 表示这个路由不需要认证
       },
       component: () => import('../views/Dashboard.vue')
},

router.beforeEach((to, from, next) => {
   document.title = to.meta.title;
   next();
});
  1. 权限控制：
  • 通过在 meta 中定义权限相关的字段（如 requiresAuth、noAuth 或 permiss），你可以在路由守卫中根据这些字段来决定用户是否有权访问某个路由。例如：
javascript 复制代码 
router.beforeEach((to, from, next) => {
    if (to.meta.requiresAuth && !user.isAuthenticated) {
        next('/login');
    } else {
        next();
    }
});
  1. 导航守卫逻辑：
  2. 组件级数据获取：
  3. 重定向逻辑：

七、NProgress 进度条

NProgress 是一个轻量级的库，用于在网页加载时显示进度条。它通过简单的 API 提供了一种方便的方式来增加网页的用户体验。

基本使用

  1. 引入 NProgress 和 CSS：
javascript 复制代码 
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

开始加载 ：NProgress.start();

完成加载 ：NProgress.done();

  • 监听路由变化：可以在路由变化时自动开始和结束进度条。
js 复制代码 
router.beforeEach((to, from, next) => {
  NProgress.start();
  next();
});

router.afterEach(() => {
  NProgress.done();
});
  • 使用不同的加载效果： NProgress 允许你自定义加载动画。
js 复制代码 
NProgress.configure({
    easing: 'ease', // 动画效果
    speed: 500, // 动画速度 
    showSpinner: false // 是否显示加载动画 
});

八、history 概念展示

在使用前端路由（如 Vue Router 或 React Router）时，history 模式是一种常见的方式，用于处理应用的路由跳转。

1、使用 router-link 组件：

html 复制代码 
<template>
      <div>
        <router-link to="/">Home</router-link>
        <router-link to="/about">About</router-link>
      </div>
</template>

2、使用 push 方法：

javascript 复制代码 
router.push('/about'); // 向路由历史添加一个新记录，导航到 /about

3、使用 go 方法：

javascript 复制代码 
router.go(-1); // 后退到上一个路由

例举403页面的例子

js 复制代码 
<template>
    <div class="error-page">
        <div class="error-box">
            <div class="error-code">403</div>
            <div class="error-desc">爱爱爱爱~~~你没有访问权限</div>
            <div class="error-handle">
                <router-link to="/">
                    <el-button type="primary" size="large">返回首页</el-button>
                </router-link>
                <el-button class="error-btn" size="large" @click="goBack">返回上一页</el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();
const goBack = () => {
    router.go(-1);
};
</script>

使用 router-link 组件的方法跳转至首页，使用 go 方法后退到上一个路由

总结：

熟练掌握这八个路由要点，玩转页面路由完全不是梦！

  • 两种路由的优缺点
  • 路由的懒加载
  • 二级路由
  • 路由守卫
  • 403 404
  • meta 用法
  • NProgress 进度条
  • history 概念
相关推荐
吕彬-前端35 分钟前
使用vite+react+ts+Ant Design开发后台管理项目（五）
前端·javascript·react.js
学前端的小朱38 分钟前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai1 小时前
uniapp
前端·javascript·vue.js·uni-app
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓2 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4112 小时前
无网络安装ionic和运行
前端·npm
理想不理想v2 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云2 小时前
不用ECharts！从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:137971205872 小时前
web端手机录音
前端
齐 飞2 小时前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解