当前位置：首页 > news >正文

Vue前端开发-路由其他配置

news 来源：原创 2025/7/5 16:39:13

在路由文件中，除了跳转配置外，还可以进行路径重定向配置，如果没有找到对应的地址，还可以实现404的配置，同时，如果某个页面需要权限登录，还可以进行路由守卫配置，接下来，分别对这些配置实现的过程进行详细的介绍。

一、重定向配置

针对一些已下线的页面和错误的地址，直接访问会出现404错误异常，为了避免这种现象，通常会通过重定向配置，指向一个新的页面地址，或者跳转到首页，代码如下所示。

{path: '/error',redirect: '/list',}

上述代码添加在router配置文件夹下的index.js文件中，重定向配置通常只需要配置两个属性就可以，一个是path，表示原有访问的路径，另一个是redirect，表示重新指定的路径，这个属性接收三种类型的值，第一种是字符串型，表示新的路径地址，如上述代码所示，第二种是router对象型，在对象中可以携带参数进行跳转，代码如下所示。

{path: '/error',redirect: {name: 'list',query: {from: 'redirect',}}}

这种类型重定向后，最终跳转的地址为“http://abc.com/list?from=redirect”，通过这种携带from来源参数的方式，可以统计有多少请求来源于重定向方式。

第三种是函数型，通过函数的return 返回需要跳转的路由地址，根据这种特征，可以在函数中进行登录用户的权限判断，根据不同的权限，返回不同的路由地址，从而实现不同用户进入不同页面的效果，代码如下所示。

{path: '/error',redirect: () => {// 从当前登录用户信息中获取角色Idconst { roleId } = loginInfo// 根据不同角色进行跳转switch (roleId) {// 管理员case 1:return '/admin'// 普通用户case 2:return '/home'// 其他default:return '/login'}}}

在上述路由配置代码中，假设 loginInfo 是用户登录后的保存登录信息的对象，并且在对象中还有roleId值，则可以根据该值，确定不同的角色，跳转不同的页面。

二、404配置

并不是所有的错误访问地址都需要重定向，有时仅是针对原有的，已下架的页面地址做重定向，因为这些地址有可能是从收藏夹中直接访问的。针对那些没有重定向的地址，可以添加一个公用的404页面，如果访问出错，就直接跳转到该页面，代码如下所示。

 {path: '/:pathMatch(.*)*',name: '404',component: () => import('../views/404.vue'),}

需要说明的是：path属性中，pathMatch(.)，是一个正则表达式，表示全部的路由地址，Vue 3中不再支持在路由配置中直接使用星号作为通配符，而支持在正则表达式中使用星号通配符作为参数。

三、路由守卫配置

虽然可以通过路由重定向，根据用户角色进入不同的页面，但有的页面在进入时，需要再次检测用户的登录状态，如果没有登录，则返回登录页重新再登录，如果已经登录，则可以进入下一页，这种状态的检测需要配置路由守卫。

路由守卫的配置依赖于路由对象router在生命周期中的钩子函数，router在整个执行过程中有三个钩子函数，它们的功能和执行时机如下表8-1所示：
在这里插入图片描述
在router对象的三个钩子函数中，beforeEach函数使用最为常用和简单，该函数又称为“路由拦截”，因为路由的功能是渲染指定路由地址的组件，而 beforeEach 函数可以在渲染组件之前做检测，当达到了某个条件后再做渲染，否则，跳到另一个页面中。

beforeEach 函数在路由配置文件中的使用非常简单，它有两个参数，一个是to，表示即将进入的路由对象，另一个是from，表示导航正要离开的对象，如果需要根据路由对象中的登录属性，决定是否需要进行拦截，则路由守卫的配置代码如下所示：

 router.beforeEach((to, from) => {const { isNoLogin } = to.metaif (!isNoLogin) return '/login'})

在上述代码中，如果即将进入的路由对象的isNoLogin属性值为true时，就可以直接渲染该组件，否则，跳转到登录页面，除这种方式外，还可以检测用户登录后的保存的用户信息是否存在，如果不存在，则跳转到登录页中，代码如下所示：

 router.beforeEach((to, from) => {const loginUser = localStorage.getItem("loginUser")if (!loginUser) return '/login'})

上述代码中，loginUser就是从缓存中获取的登录用户对象，如果存在，说明已登录过，否则，跳转到登录页，进行登录。
在这里插入图片描述

一、重定向配置

二、404配置

三、路由守卫配置

相关文章：