Vue前端路由详解——以Ruoyi框架为案例学习

本文主要是介绍Vue前端路由详解——以Ruoyi框架为案例学习，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Vue路由

Vue路由详解_vue 页面路由-CSDN博客

路由模式

Vue 的路由模式：hash 模式和 history 模式的区别_vue路由history和hash的区别-CSDN博客

1. URL格式：
   • Hash模式：URL中包含#号，用于区分页面部分，实际请求的页面地址并没有改变。
   • History模式：URL看起来更加自然，像是普通的页面跳转，不包含#号。
2. 兼容性：
   • Hash模式：在所有浏览器中都能正常工作，包括老旧浏览器。
   • History模式：需要浏览器支持HTML5 History API，因此可能在一些旧版浏览器中无法使用。
3. 对SEO的影响：
   • Hash模式：由于搜索引擎不会解析#后面的内容，因此在SEO方面存在一定的问题。
   • History模式：搜索引擎能够直接解析路由路径，有利于SEO。
4. 用户体验：
   • Hash模式：URL中包含#号，可能影响用户体验和美观性。
   • History模式：URL更加美观，符合用户的直觉和期望。
5. 刷新页面：
   • Hash模式：刷新页面时，由于URL的hash部分不会向服务器发送请求，因此不会出现404错误。
   • History模式：刷新页面时，如果服务器未正确配置，浏览器会向服务器发送请求，如果服务器没有正确处理，将导致404错误。
6. 服务器配置：
   • Hash模式：无需对服务器进行特殊配置。
   • History模式：需要服务器配置支持，确保对所有前端路由的URL都能返回相同的页面（通常是index.html），以便前端路由接管后续的URL处理。
7. 工作原理：
   • Hash模式：通过监听URL的hash变化来实现路由跳转，不向服务器发送请求。
   • History模式：使用HTML5 History API（如pushState和replaceState）来修改浏览器历史记录，从而实现URL的跳转，但同样不向服务器发送请求。这种模式充分利用了浏览器的历史记录功能，实现了无刷新的页面跳转。

Vue路由的动态传参、前置后置路由以及路由组件传参详解

一、Vue路由的动态传参

Vue路由的动态传参主要通过两种方式实现：params方式和query方式。

1. params方式（动态路由匹配）

   • 定义路由：在路由配置中，可以使用:来定义动态片段。例如，{ path: '/user/:id', component: User }。这里的:id就是一个动态片段，它表示/user/后面可以跟随任意字符，这些字符会被捕获并作为$route.params的一部分。
   • 传参：通过<router-link>的to属性或编程式导航（如this.$router.push）来传递参数。如果是<router-link>，则需要在to对象中指定name和params（注意，这里的params不会出现在URL中，且仅当路由是通过name进行匹配时有效）。如果是编程式导航，则可以通过path和params（通常结合router.addRoutes动态添加路由时使用，或者在某些特定场景下，如嵌套路由）。
   • 接收参数：在目标组件中，可以通过this.$route.params来访问传递的参数。

2. query方式

   • 定义路由：与params方式不同，使用query方式传参时，路由定义与普通路由无异，不需要特殊标记。
   • 传参：通过<router-link>的to属性或编程式导航（如this.$router.push）来传递参数。在to对象中，使用query属性来定义要传递的参数。这些参数会出现在URL的查询字符串部分（即?后面的部分）。
   • 接收参数：在目标组件中，可以通过this.$route.query来访问传递的参数。

二、前置路由守卫（前置钩子）

Vue Router 提供了导航守卫（Navigation Guards），允许你在路由跳转前后执行特定的逻辑。前置路由守卫（也称为全局前置守卫或路由独享守卫）是最常用的一种。

• 全局前置守卫：可以通过router.beforeEach注册一个全局前置守卫。这个守卫会在路由即将改变前被调用，你可以在这里执行权限校验、页面跳转前的数据请求等操作。
• 路由独享守卫：在单个路由配置中，可以直接定义beforeEnter守卫。这个守卫仅在该路由被访问时触发。
• 组件内的守卫：组件内还可以定义beforeRouteEnter、beforeRouteUpdate（2.2+）和beforeRouteLeave守卫。这些守卫允许你在组件的不同生命周期阶段执行路由相关的逻辑。

三、路由组件传参

路由组件传参通常不是指通过路由本身传递参数给组件，而是指在组件之间通过路由进行跳转时，如何传递数据给目标组件。这实际上与路由的动态传参（params和query）紧密相关。

然而，Vue Router 还提供了一种特殊的方式，即props属性，它允许你将路由参数（$route.params或$route.query）映射为组件的props。这样，组件就可以像接收普通props一样接收路由传递的数据，而无需手动从$route对象中解构数据。

• 使用props属性：在路由配置中，为组件设置props属性为true或对象/函数，即可将路由参数映射为组件的props。
  • props: true：将$route.params中的所有参数映射为组件的props。
  • props: { // 对象 }：允许你将路由参数映射为指定的props名。
  • props: (route) => ({ // 函数 })：允许你编写一个函数来返回应该被映射为props的对象。这个函数接收当前路由作为参数。

综上所述，Vue路由的动态传参、前置后置路由以及路由组件传参是Vue Router中非常强大的功能，它们为单页面应用（SPA）中的页面导航和数据传递提供了灵活而强大的支持。

 Ruoyi框架前端路由

Ruoyi框架是一个基于Vue.js和Spring Boot的开源企业级快速开发平台，它提供了一套完整的前后端分离的解决方案。在前端部分，Ruoyi框架主要使用了Vue.js作为前端框架，并通过Vue Router实现路由管理。以下是对Ruoyi框架前端路由的详细解析：

一、路由配置

在Ruoyi框架中，路由配置主要通过@/router/index.js文件进行管理。这个文件是Vue Router的入口文件，负责定义和配置所有的路由规则。

1. 静态路由：
   • 静态路由是指在路由配置阶段就确定好的路由规则，它们的路径和组件都是在编译时确定的，并且不需要动态判断权限的路由，如登录页、404页面等。
   • 在index.js文件中，静态路由通常被定义为一个常量数组constantRoutes，并在创建Vue Router实例时作为routes选项传入。
   • 静态路由的配置示例（简化版）：

const constantRoutes = [ 
{ path: '/login', component: () => import('@/views/login/index'), hidden: true }, 
{ path: '/404', component: () => import('@/views/error-page/404'), hidden: true }, 
// 其他静态路由... 
]; const router = new VueRouter({ 
mode: 'history', 
base: process.env.BASE_URL, 
routes: constantRoutes 
});

1. 动态路由：
   • 动态路由是指在运行时根据某些条件动态添加或修改的路由规则，通常用于需要根据用户权限或其他条件动态生成路由规则的场景，如权限管理系统。
   • 在Ruoyi框架中，动态路由的配置通常放在@/store/modules/permission.js文件中，通过调用后端接口获取路由配置信息，并使用router.addRoutes方法动态添加到路由表中。
   • 动态路由的配置示例（简化版）：

router.addRoutes(asyncRoutes);

二、路由守卫

Ruoyi框架在前端路由中使用了Vue Router提供的路由守卫功能，以实现权限控制、页面跳转前的数据请求等需求。

1. 全局前置守卫：
   • 通过router.beforeEach注册的全局前置守卫，可以在路由即将改变前执行特定的逻辑，如权限校验、页面跳转前的数据请求等。
   • 示例代码（简化版）：

router.beforeEach((to, from, next) => { 
// 权限校验逻辑 
if (to.meta.roles && !store.getters.roles.includes(to.meta.roles[0])) { 
next({ path: '/404', replace: true }); 
} else { 
next(); 
} 
});

1. 路由独享守卫和组件内的守卫：
   • 除了全局前置守卫外，Ruoyi框架还可能使用路由独享守卫（beforeEnter）和组件内的守卫（beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave）来实现更细粒度的控制。

三、路由懒加载

为了提高应用的加载速度和性能，Ruoyi框架在路由配置中使用了路由懒加载技术。通过动态导入（import()）组件的方式，可以实现按需加载，即只有在访问到某个路由时，才会加载对应的组件代码。

四、路由元信息（meta）

在Ruoyi框架中，路由配置中的meta字段通常用于存储一些自定义的信息，如路由的权限要求、是否缓存、是否显示在侧边栏等。这些信息可以在路由守卫、组件内部等地方被访问和使用。

五、总结

Ruoyi框架前端路由通过Vue Router实现，支持静态路由和动态路由的配置，通过路由守卫实现权限控制等需求，采用路由懒加载提高应用性能，并通过路由元信息存储自定义信息。这些特性共同构成了Ruoyi框架前端路由的完整体系，为开发者提供了灵活、强大的路由管理能力。

这篇关于Vue前端路由详解——以Ruoyi框架为案例学习的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---