VUE路由防卫功能举例

最新推荐文章于 2024-07-09 21:18:14 发布

free_girl_fang

最新推荐文章于 2024-07-09 21:18:14 发布

阅读量65

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/free_girl_fang/article/details/129371666

版权

VUE路由防卫功能举例

路由防卫的功能在前端应用比较广泛，主要用于前端页面与页面之间的跳转限制，也可以称之为权限控制，我们接下来使用登录页面与主页面使用路由防卫功能。

路由防卫分为全局防卫、路由独享的守卫、组件守卫。全局防卫是基于所有的页面全部防卫，组件守卫会导致耦合性增加，所有推荐使用路由独享守卫。

没有使用守卫时的代码

主页面路由信息：
const routes = [
{
path:"/",
name:"公安系统",
component:Index
},

登录页面路由信息：

  {
path:"/login",
name:"login",
component:login
  },
]

实现主页面的跳转的前置页面只能是登录页面功能

修改后的代码：

主页面路由信息：
const routes = [
{
path:"/",
name:"公安系统",
component:Index，


beforeEnter:(to,from,next)=>
{
 
  
  if(from.path==='/login')
  {
   
    next();
  }
  else
  {
   
    next({path:'/login'})
     console.log('请登录！');
  }


},

登录页面路由信息：

  {
path:"/login",
name:"login",
component:login
  },
]

beforeEnter:(to,from,next)=>主函数