vue路由守卫有哪三种类型

vue中路由守卫一共有三种，分别为：全局路由守卫（全局前置守卫、全局后置守卫），组件内路由守卫，路由独享守卫（是在路由配置页面单独给路由配置的一个守卫）。

路由守卫，也可以是路由拦截，我们可以通过路由拦截，来判断用户是否登录，该页面用户是否有权限浏览，需要结合meta来实现

vue中路由守卫一共有三种，一个全局路由守卫，一个是组件内路由守卫，一个是router独享守卫

所谓的路由守卫可以简单的理解为一座房子的门口的保安，想要进入这个房子就必须通过保安的检查，要告诉路由守卫你从哪里来？总不能随便陌生人就给放进去？要到哪里去？然后保安再告诉你下一步该怎么做？如果你的确是这个房子主人允许进入的人，那就让你进入，否则就要打电话给房子主人，跟房主商量(登录注册)，给你权限。

一.全局守卫
1. router.beforeEach((to,from,next)=>{})

2. 回调函数中的参数，to：进入到哪个路由去，from：从哪个路由离开，next：函数，决定是否展示你要看到的路由页面。

3. 如下例：main.js中设置全局守卫

在main.js中，有一个路由实例化对象router。在main.js中设置守卫已是全局守卫。
如下，判断to.path当前将要进入的路径是否为登录或注册，如果是就执行next()，展示当前界面。如果不是，就弹出alert，然后移至登录界面。
这样就可实现，用户在未登录状态下，展示的一直是登录界面。

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

if(to.path == '/login' || to.path == '/register'){

next();

}else{

alert('您还没有登录，请先登录');

next('/login');

}

})

4. 全局后置钩子router.afterEach((to,from)=>{})

只有两个参数，to：进入到哪个路由去，from：从哪个路由离。
如下，每次切换路由时，都会弹出alert，点击确定后，展示当前页面。
1

router.afterEach((to,from)=>{

alert("after each");

})

5. 判断store.gettes.isLogin === false 是否登录

二.组件内的守卫
1. 到达这个组件时，beforeRouteEnter:(to,from,next)=>{}

在Admin.vue文件中，点击转到admin路由时，执行beforeRouteEnter函数
to，from参数与上面使用方法一致。next回调函数略有不同。
如下例，data 组件内守卫有特殊情况，如果我们直接以
beforeRouteEnter:(to,from,next)=>{ alert("hello" + this.name);}进行访问admin页面，会发现alert输出hello undefined。这是因为，现在访问不到我们的data属性，执行顺序是不一致，这与的声明周期有关。在执行完之前，data数据还未渲染。所以这里，next()会给一个对应的回调，帮助完成。

2. 离开这个组件时，beforeRouteLeave:(to,from,next)=>{}

点击其他组件时，判断是否确认离开。确认执行next()；取消执行next(false)，留在当前页面。
1

beforeRouteLeave:(to,from,next)=>{

if(confirm("确定离开此页面吗？") == true){

next();

}else{

next(false);

}

三.路由独享的守卫
1. beforeEnter:(to,from,next)=>{}，用法与全局守卫一致。只是，将其写进其中一个路由对象中，只在这个路由下起作用。

vue路由守卫有哪三种类型相关推荐

vue路由传参的三种方式/含页面刷新参数丢失解决方案(详细)
vue路由传参的三种方式以及页面刷新参数丢失问题一.路由传参的三种方式 1.传参方式一:params传参 2.传参方式二:路由属性配置传参 3.传参方式三:query传参二.三种传递方式的区别一 ...
详解vue路由传参的三种方式
在我们开发vue项目的时候,路由传参几乎是我们必须要用到的,一般出现场景是,当我们点击某个组件的某个按钮时跳转到另一个组件中,并携带参数,便于第二个组件获取数据.下面我就来说说vue路由传参的三种方式 ...
【vue】vue路由传参的三种方式
前言 vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转.传参方式可划分为 params 传参和 query 传参,而 params 传参又可分为在 url 中显示参数和不显示 ...
vue设置html自动跳转路由,vue路由跳转的三种方式是什么？
本教程操作环境:windows7系统.vue2.9版,适用于所有品牌电脑. vue中通过路由跳转的三种方式 router-view 实现路由内容的地方,引入组件时写到需要引入的地方, 需要注意的是,使 ...
vue路由传参的三种方式区别（params,query）
最近在做一个项目涉及到列表到详情页的参数的传递,网上搜索一下路由传参,结合自己的写法找到一种适合自己的,不过也对三种写法都有了了解,在此记录一下 1 <ul class="table_ ...
vue路由传参的三种方式
目录 1.动态路由传参 2.params传参 3.query传参 1.动态路由传参使用"路径参数"使用冒号 : 标记.当匹配到一个路由时,参数值会被设置到 this.$route ...
vue路由传参的三种基本方式 - 流年的樱花逝 - SegmentFault 思否
现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据. 父组件中: <li v-for="article in articles" @click= ...
vue路由传参的三种基本方式
一: getDescribe(id) { // 直接调用$router.push 实现携带参数的跳转this.$router.push({path: `/describe/${id}`,}) 方案一, ...
vue 函数路由跳转_vue中通过路由跳转的三种方式
router-view 实现路由内容的地方,引入组件时写到需要引入的地方需要注意的是,使用vue-router控制路由则必须router-view作为容器. 通过路由跳转的三种方式 1.router ...

vue路由守卫有哪三种类型

vue路由守卫有哪三种类型相关推荐

最新文章

热门文章