vue路由拦截及页面跳转的设置方法

Vue路由拦截与页面跳转设置详解

在Vue项目中，路由拦截与页面跳转的设置是非常关键的一部分。通过合理的设置，我们可以确保用户只能访问他们有权限访问的页面，同时也能提供更好的用户体验。下面，我将详细介绍如何进行设置。

一、router/index.js

在Vue的路由配置文件router/index.js中，我们可以为每个路由设置一些元数据（meta），例如是否需要认证（requireAuth）。

```javascript

export default new Router({

routes: [

{

path: '/selfcenter',

name: 'selfcenter',

meta: {

requireAuth: true // 表示进入此页面需要认证

},

component: SelfCenter

}

]

})

```

二、main.js

在main.js文件中，我们可以使用Vue路由的导航守卫（navigation guards）来进行路由拦截。下面是一个beforeEach全局前置守卫的示例：

```javascript

router.beforeEach((to, from, next) => {

if (to.matched.some(record => record.meta.requireAuth)) { // 检查目标路由是否需要认证

const sid = sessionStorage.getItem('sid'); // 从本地存储获取用户登录信息

if (sid) { // 如果已经登录，则允许访问

next();

} else { // 如果未登录，则重定向到登录页面，并传递原页面路径

next({

path: '/login',

query: { redirect: to.fullPath } // 登录后重定向到原页面路径

});

}

} else { // 如果不需要认证，则直接访问目标页面

next();

}

});

```

三、login.vue - 登录成功后操作

在登录成功后，我们需要将用户的登录信息存储到本地，然后重定向到他们之前试图访问的页面。下面是login.vue中的相关代码：

```javascript

sessionStorage.setItem('sid', res.data.data.sid); // 存储用户登录信息到本地存储

this.$router.push(this.$route.query.redirect); // 重定向到用户之前试图访问的页面路径（通过query参数传递）

```

以上就是Vue路由拦截及页面跳转的设置方法。通过合理的设置和使用，我们可以为用户提供更好的体验，同时也能保护我们的应用不被未授权的用户访问。如果您有任何疑问或需要进一步了解，请随时联系我们。希望这篇文章对大家有所帮助，感谢大家对狼蚁SEO网站的支持！