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

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

Vue路由

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

路由模式

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

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

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

一、Vue路由的动态传参

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

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来访问传递的参数。
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的入口文件，负责定义和配置所有的路由规则。

静态路由：
- 静态路由是指在路由配置阶段就确定好的路由规则，它们的路径和组件都是在编译时确定的，并且不需要动态判断权限的路由，如登录页、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 
});

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

router.addRoutes(asyncRoutes);

二、路由守卫

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

全局前置守卫：
- 通过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(); 
} 
});