精华内容
下载资源
问答
  • vue组件路由守卫
    千次阅读
    2022-03-30 09:17:29

    路由守卫分为三种 ——分别是:全局路由守卫、组件路由守卫、独享路由守卫。

    一.全局守卫

    全局守卫又分为全局前置守卫、和后置守卫

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

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

            从名字全局前置守卫不难理解,它是全局的,即对 整个单页应用(SPA) 中的所有路由都生效,所以当定义了全局的前置守卫,在进入每一个路由之前都会调用这个回调,那么如果你在回调中对路由的跳转条件判断出错,简单点就是死循环…因为你遗漏了某种路由跳转的情况,守卫会一直执行。所以在使用全局前置守卫的时候一定要判断清楚可能会出现的路由跳转的情况。

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

            只有两个参数,to:进入到哪个路由去,from:从哪个路由离。

            理解了全局前置守卫,那么全局后置守卫也就那么一回事。全局后置守卫是整个单页应用中每一次路由跳转后都会执行其中的回调。所以多用于路由跳转后的相应页面操作,并不像全局前置守卫那样会在回调中进行页面的重定向或跳转。

    二.组件内的守卫

    组件路由守卫分为到达这个组件时,离开这个组件时

    1. beforeRouteEnter:(to,from,next)=>{}——到达

            to,from参数与上面使用方法一致。next回调函数略有不同。

    2. beforeRouteLeave:(to,from,next)=>{}——离开

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

    三.路由独享的守卫

    1. beforeEnter:(to,from,next)=>{}

            与全局路由守卫用法一致,但是只能针对一个页面使用

    更多相关内容
  • vue提供了3中组件路由守卫: 1.哪些组件可以使用路由守卫 不是在所有的组件里面使用这三种守卫都会生效, 首先说一说哪些组件可以使用组件内的守卫:有路由对应的组件 什么意思?下图是路由配置的一部分,相当于...

    vue提供了3中组件内路由守卫:
    在这里插入图片描述
    1.哪些组件可以使用路由守卫
    不是在所有的组件里面使用这三种守卫都会生效,
    首先说一说哪些组件可以使用组件内的守卫:有路由对应的组件
    什么意思?下图是路由配置的一部分,相当于里面的home组件以及其子路由对应的homeNews,homeMessage,我们可以在这些组件的内部使用路由守卫,但是如果我们在这些组件里面还引用了一些其他自定义的组件,那些组件并没有路由对应,所以路由守卫不会生效。
    在这里插入图片描述
    2.哪些情况会触发组件内路由守卫:
    例如现在有路由A和B,它们同级,A又有两个子路由A1,A2,(这里说的路由也指对应的组件)那么
    2.1在A1和A2之间切换路由时,不会触发A的路由守卫
    2.2如果A1和A2也使用了相应的路由守卫,那么在它们之间切换时,会触发相应的路由守卫
    2.3如果A和A1都使用了路由守卫,从A1跳到B时会同时触发A和A1的路由守卫

    以上为今天碰到问题时自己测试出的结果,如有不对,还望指出

    展开全文
  • 组件内部的路由守卫 基本形式: export default { name: "Cart", beforeRouteEnter(to, from, next) { // 进入当前组件 当前组件不存在 this不存在 //console.log(to,from); //如果想获取组件的实例 //给...

    组件内部的路由守卫

    • 基本形式:
    export default {
      name: "Cart",
      beforeRouteEnter(to, from, next) {
        // 进入当前组件  当前组件不存在  this不存在
        //console.log(to,from);
        //如果想获取组件的实例
        //给next 添加一个匿名函数回调  形参vm 代表当前组件
        next((vm)=>{
        //   console.log(vm);
        //   vm等价this  指当前组件实例  可以操作当前组件的相关变量
        });
      },
      beforeRouteUpdate(to,from,next){
          // 在当前路由改变,但是该组件被复用时调用
          // 由于会渲染同样的组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
          // 可以访问组件实例 `this`
        },
      beforeRouteLeave(to, from, next) {
        // 离开当前组件
        //console.log(this);
        next();
      },
    };
    
    • 举例说明
      index.js配置路由节点
    // 配置的路由节点
    import Home from '../views/Home'
    export default[
      {
        path: '/',
        name: 'Home',
        component: Home
      },
      {
        path:'/about',
        name:'About',
        component:About,
      }
    ]
    
    

    Home.vue 子组件

    <template>
      <div class="home">
          home页面
          <br>
          //about界面的跳转链接
          <router-link to="{path:./about">about</router-link>
      </div>
    </template>
    <script>
    export default {
      name: 'Home',
      beforeRouteLeave(to, from, next) {
        // 离开当前组件
        console.log(this);
        console.log('qqq');
        next();
      },
    }
    </script>
    
    

    About.vue 子组件

    </template>
    <script>
    export default {
      name:'about',
      beforeRouteEnter(to, from, next) {
        //进入当前组件
        next((vm)=>{
         alert("没有登录,请继续登录!");
        })
      }
    }
    </script>
    <style>
    </style>
    

    界面显示结果:
    点击界面about链接:会在进去路由之前进行判断
    在这里插入图片描述
    在离开 / 路由 home界面 跳转到 /about路由时的结果显示:
    在这里插入图片描述

    全局守卫链接:
    https://blog.csdn.net/weixin_47863547/article/details/119209310

    展开全文
  • Vue路由守卫

    2022-03-23 14:44:16
    路由守卫Vue路由中常用的一个知识点,其作用就是对用户的操作进行一些权限控制,在一些特定的环境下,避免不了使用它


    Vue路由守卫

    路由守卫,简单理解来说就是,当用户要进行一些操作时,我需要用户的一些信息或数据或行为,我判断过后,才会同意用户进行操作,说到这里,我想大家心里都或多或少有点理解了吧,官方一点的解释就是进行操作的鉴权,当操作与之条件匹配时,操作成功,当操作与之不匹配时,操作终止,作用就是是对路由进行权限控制。

    在Vue中,路由守卫分为三种:全局路由守卫、独享路由守卫以及组件内路由守卫

    全局路由守卫

    全局路由守卫,顾名思义,一旦配置,那么作用范围就是所有的路由,全局路由又分为全局前置守卫全局后置守卫

    全局前置守卫

    全局前置守卫,组件初始化时调用,每次路由切换之前调用,路由切换之前指的就是,举个例子说,当前我在A路由组件,我要切换到B路由组件,那么前置路由守卫就是在我点了切换按钮,但B路由组件还没有被呈现在页面上的时候被调用。

    //全局前置守卫
    router.beforeEach((to,from,next) =>{
      //第一个参数to,包含的内容是切换后的路由对象,也就是跳转后的路由对象
      //第二个参数from,包含的内容的是切换前的路由对象,也就是跳转前的路由对象
      //第三个参数next(),是否往下执行,执行的话,如果不写的话路由就不会跳转,操作将会终止
    })
    

    全局后置守卫

    全局后置守卫,组件初始化时调用,每次路由切换之后调用,路由切换之后指的就是,举个例子说,当前我在A路由组件,我要切换到B路由组件,那么前置路由守卫就是在我点了切换按钮B路由组件呈现到页面中后被调用。

    router.afterEach((to,from) =>{
      //第一个参数to,包含的内容是切换后的路由对象,也就是跳转后的路由对象
      //第二个参数from,包含的内容的是切换前的路由对象,也就是跳转前的路由对象
    

    实例代码:

    下面我写的实例是当时看网课尚硅谷老师教的,结合浏览器的Local Storage做出鉴权操作:
    主要的就是src/store/index.js文件中的配置
    src/store/index.js:

    //该文件用于创建整个应用的router
    //首先,需要引用vue-router
    import VueRouter from "vue-router";
    
    //引入路由组件
    import TestA from '../pages/TestA'
    import TestB from '../pages/TestB'
    // 引入二级路由组件
    import TestBHzw from '../pages/TestBHzw'
    import TestBHyrz from '../pages/TestBHyrz'
    
    import DataList from '../pages/DataList'
    
    //创建并暴露一个VueRouter
    const router =  new VueRouter({
        routes:[
            //配置路由路径和路由组件
            {
                //这里的路径可自由定义,但是为了初学者好理解,我就采用和组件同样的命名,防止在写路径的时候搞混
                name:'导航一',
                path:'/TestA',
                component:TestA,     //要跳转到的组件   
                children:[
                    {
                        // 给二级路由起名字
                        name:'DataName',
                        path:'DataList/:introduce',     //起到占位作用
                        component:DataList
                    }
                ]
            },
            {
                name:'导航二',
                path:'/TestB',
                component:TestB,
                meta:{isAuth:true,},
                // 配置二级路由
                children:[
                    {
                        path:'TestBHzw',     //重点注意,不要加 /
                        component:TestBHzw
                    },
                    {
                        path:'TestBHyrz',
                        component:TestBHyrz
                    }
                ]
            }
        ]
    })
    
    //全局前置路由,配合浏览器localStorage进行鉴权操作
    router.beforeEach((to, from, next) =>{
        //首先,我们先看一看to和from参数,next就是执行的意思,不写页面是不会跳转的
        // console.log(to, from);
        if(to.meta.isAuth){     //判断是否需要鉴权
            if(localStorage.getItem('name') === '张三'){
                next();
            }else{
                alert('不好意思,姓名不对,没有权限');
            }
        }else{
            next()
        }
    })
    
    // 全局后置路由,简单写一个弹窗,在进入每一个路由组件后弹出一句话
    router.afterEach(() =>{
        alert('欢迎你!!');
    })
    
    export default router;
    

    TestA.vue:

    <template>
      <div>
        <h4>著名动漫简介</h4>
        <ul>
          <li v-for="i in DataList" :key="i.id">
            <!-- 使用params参数传递动态参数 注意:params传递参数必须配合name属性-->
            <router-link :to="{
              name:'DataName',
              params:{
                introduce:i.introduce
              }
            }">{{i.name}}</router-link>
          </li>
        </ul>
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    export default {
        name:'TestA',
        data(){
          return{
            DataList:[
              {
                id:1,
                name:'《海贼王》',
                introduce:'《航海王》是日本漫画家尾田荣一郎作画的少年漫画作品,于1997年7月22日在集英社《周刊少年Jump》开始连载。改编的电视动画《航海王》于1999年10月20日起在富士电视台首播。'
              },
              {
                id:2,
                name:'《火影忍者》',
                introduce:'电视动画《火影忍者》改编自日本漫画家岸本齐史的同名漫画,2002年10月3日在东京电视台系列全6局、岐阜放送首播,共220话;第二季《火影忍者疾风传》于2007年2月15日-2017年3月23日在东京电视台播出,共500话;累计全720话。'
              },
              {
                id:3,
                name:'《斗破苍穹》',
                introduce:'《斗破苍穹》是一部由阅文集团旗下起点中文网作家天蚕土豆同名玄幻长篇经典小说改编的动画。该动画第一季已于2017年1月7日在腾讯视频上映,bilibili同步跟播,共十二集。'
              },
              {
                id:4,
                name:'《鬼灭之刃》',
                introduce:'《鬼灭之刃》是日本漫画家吾峠呼世晴所著的少年漫画,自2016年2月15日—2020年5月11日在集英社《周刊少年Jump》上连载。已完结。'
              }
            ]
          }
        }
    }
    </script>
    
    <style scoped>
    h4{
      text-align: center;
    }
    a{
      text-decoration: none;
    }
    .active:visited{
      color: brown;
    }
    </style>
    

    TestB.vue:

    <template>
      <div>
        <h4>我是内容二</h4>
        <!-- 多级路由 -->
        <div class="box">
          <!-- 此处路径一定要写完整路径 -->
          <router-link to="/TestB/TestBHzw" active-class="active">点击查看《海贼王的简介》</router-link>&nbsp;&nbsp;&nbsp;
          <router-link to="/TestB/TestBHyrz" active-class="active">点击查看《火影忍者的简介》</router-link>
          <hr>
          <router-view></router-view>
        </div>
      </div>
    </template>
    
    <script>
    export default {
        name:'TestB',
    }
    </script>
    
    <style scoped>
    h4{
      text-align: center;
    }
    .box{
      text-align: center;
    }
    a{
      text-decoration: none;
    }
    .active:visited{
      color: brown;
    }
    </style>
    

    DataList.vue:

      <template>
      <div>
          <ul>
              <!-- 采用插值语法就可以拿到父级路由中的数据 -->
              <li>{{$route.params.introduce}}</li>
          </ul>
      </div>
    </template>
    
    <script>
    export default {
        name:'DataList'
    }
    </script>
    
    <style>
    
    </style>
    

    TestBHzw.vue和TestBHyrz.vue的结构是一样的,就不重复展示了:

    <template>
      <div>
        <p>
          电视动画《火影忍者》改编自日本漫画家岸本齐史的同名漫画,
          2002年10月3日在东京电视台系列全6局、岐阜放送首播,共220话;
          第二季《火影忍者疾风传》于2007年2月15日-2017年3月23日在东京电视台播出,共500话;累计全720话。
        </p>
      </div>
    </template>
    
    <script>
    export default {
        name:'TestBHyrz'
    }
    </script>
    
    <style>
    
    </style>
    

    当然,想要配置路由守卫,前提就是把基本的路由配置好

    因为不管是前置守卫和后置守卫,都有三个参数,netx()我们已经说过,不写的话不会往下一步走,
    那么我们输出一下
    to
    from看看
    当前页面是初始化页面,所以此时输出的to, from都是空对象。
    在这里插入图片描述
    当我们点击 “导航一” 时,to里面有了新内容,为什么from没有呢,是因为我们处于最顶层初始化页面,在我们点击之前,我们是没有路由的,所以只能捕获到我们要去往哪一个路由组件,匹配不到我们来自哪一个路由组件
    在这里插入图片描述
    当我们处于第一级路由的 “导航一” 跳往 “导航二” 时,此时的to和from就显而易见了
    在这里插入图片描述
    要想配合localStorage来实现鉴权,我们就要先在浏览器中给他一对key—value
    在这里插入图片描述
    现在我们就可以把鉴权的操作写在前置守卫中了
    在这里插入图片描述
    后置守卫就简单实现一下进入组件后实现弹窗
    在这里插入图片描述

    此时我们切换到“导航二”组件时,前置路由守卫已经拒绝了我们的访问,那是因为我在鉴权操作中,匹配的名字是“张三”
    在这里插入图片描述
    把名字改为“王五”后,我们可以正常访问“导航二”组件了
    在这里插入图片描述


    独享守卫

    组件独享守卫是在进入组件时被调用,区别就在于,想对那个路由进行权限控制就直接在其路由配置项中添加守卫,作用域也仅限于该路由

    beforeEnter(to,from,next){
      //第一个参数to,包含的内容是切换后的路由对象,也就是跳转后的路由对象
      //第二个参数from,包含的内容的是切换前的路由对象,也就是跳转前的路由对象
      //第三个参数next(),是否往下执行,执行的话,如果不写的话路由就不会跳转,操作将会终止
    }
    

    可自行去尝试,其实效果都是一样的,只不过,全局路由守卫服务的是所有路由组件,而独享路由守卫只服务于被配置的单个路由组件


    组件内守卫

    当使用路由规则进入该组件或离开该组件时,就会触发组件内守卫的调用,而组件内守卫的作用于范围也仅限于该组件

    //进入守卫:通过路由规则,进入该组件时被调用
    beforeRouteEnter (to, from, next) {
      //第一个参数to,包含的内容是切换后的路由对象,也就是跳转后的路由对象
      //第二个参数from,包含的内容的是切换前的路由对象,也就是跳转前的路由对象
      //第三个参数next(),是否往下执行,执行的话,如果不写的话路由就不会跳转,操作将会终止
    },
    //离开守卫:通过路由规则,离开该组件时被调用
    beforeRouteLeave (to, from, next) {
      //第一个参数to,包含的内容是切换后的路由对象,也就是跳转后的路由对象
      //第二个参数from,包含的内容的是切换前的路由对象,也就是跳转前的路由对象
      //第三个参数next(),是否往下执行,执行的话,如果不写的话路由就不会跳转,操作将会终止
    }
    

    唯一不同于之前的就是
    BeforeRouterLeave(),它并不像全局后置守卫一样在路由组件加载完成之后调用,而是在你切换出这个组件后被调用,也就是离开这个组件后被调用,在开发中,我们也可以使用BeforeRouterLeave() 来完成某些操作,比如当我要切换出该组件事,我希望该组件的操作能暂停,而不是一直运行,只有当我切换回该组件时,又再次运行,这样的操作就可以配合着beforeRouteEnter() 来完成,也可以提高应用的性能


    总结

    路由守卫在实际开发过程中是一个较为重要的知识点,其作用和功能在实际开发中也大大方便了我们的开发,在对用户鉴权操作时也提高了我们编写代码的小效率,以上就是我个人在学习时对路由守卫的理解和笔记。
    在这里插入图片描述
    纸上得来终觉浅,绝知此事要躬行!!

    创作不易,记得点赞收藏加关注哟

    展开全文
  • 今天在写一个组件时候用到了组件路由守卫,但是在赋值时无法将路由中query的值绑定到组件的this中,这是因为 const Foo = { template: `...`, beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由...
  • Vue中的路由守卫

    千次阅读 2021-12-29 11:42:32
    1.全局守卫2.组件守卫3.单个路由独享的守卫
  • } from 'vue-router' // 省略了routes 中的路由规则 const routes = [ ... ... ] const router = createRouter({ history: createWebHashHistory(), routes }) // 全局守卫:登录拦截 本地没有存token,请重新...
  • 二、vue路由守卫分为 '全局守卫'、'组件守卫'、'单个路由守卫' 三种 1.全局守卫:在App.vue写入 1.1、beforeEach 在路由跳转前进行触发 ,是路由的前置守卫,它主要有三个参数to、from、next三个,分别是 'to---...
  • VUE路由守卫

    千次阅读 2022-03-30 08:53:14
    vue路由守卫分为三种:全局路由守卫组件路由守卫和路由独享守卫 1.每个守卫方法接收三个参数: to : 即将要进入的目标 路由对象 from : 当前导航正要离开的路由 next : 一定要调用该方法来 ...
  • vue 路由导航守卫(全局守卫路由独享守卫组件守卫)
  • 在你想要使用的组件内使用 在beforeRouteEnter中不能直接使用this获取到组件内的方法和data 通过使用这个vm来获取了 我这里的使用场景是面包屑 然后进行了一个to from的匹配 beforeRouteEnter(to, from, next) { ...
  • vue路由守卫使用

    2020-06-16 22:04:43
    vue router.afterEach(全局后置守卫) router.beforeEach 是页面加载之前,router.afterEach是页面加载之后 单个的路由钩子函数:beforeEnter 组件内的路由钩子函数:beforeRouteEnter、beforeRouteLeave、...
  • vue的三种路由守卫

    2022-04-01 15:43:53
    vue⼀共给我们提供了三种路由守卫 全局路由守卫 前置守卫: router.beforeEach((to,from,next) => {}) to-到哪里去 from --从哪里来 next–重定向 //路由拦截 我们经常使⽤路由守卫实现⻚⾯的鉴权 router....
  • 1.全局路由守卫 const Foo = { template: ..., beforeRouteEnter(to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不能!获取组件实例 this // 因为当守卫执行前,组件实例还没被创建 }, ...
  • vue2进阶篇:vue-router之“使用组件路由守卫
  • 组件路由守卫,争对某个组件进入离开时的权限规则
  • 5分钟学会vue中的路由守卫

    千次阅读 多人点赞 2020-09-11 00:31:58
    5分钟学会vue中的路由守卫 在项目开发中每一次路由的切换或者页面的刷新都需要判断用户是否已经登录,前端可以判断,后端也会进行判断的,我们前端最好也进行判断。vue-router提供了导航钩子:全局前置导航钩子 ...
  • 例: beforeRouteEnter (to, from, next) { ...由于vue实例化在此阶段还没完成实例化, 所以在beforeRouteEnter方法中不能用this, 但是可以通过next返回的参数来访问示例内的属性并赋值, 常见场景是该组件需要.
  • 主要给大家介绍了关于vue路由守卫路由守卫无限循环问题的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
  • vue-router 路由实现: 路由就是用来跟后端服务器进行交互的一种方式,通过不同的路径,来请求不同的资源,请求不同的页面是路由的其中一种功能。 首先知道有3个参数 to , from, next (意义: to是即将要进入的目标...
  • 主要介绍了Vue路由守卫及页面登录权限控制的设置方法,本文通过实例代码通过两种方法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue 组件路由守卫

    2021-07-31 17:01:14
    要点: 然后加next()进行放行 ...然在beforerouteenter里面也能写很多权限判断,而且也能调用路由规则的东西 、 发现两个是定死的,当来的时候to一定为about 离开的时候from也为about ...
  • vue中路由守卫一共有三种,一个全局路由守卫,一个是组件路由守卫,一个是router独享守卫 所谓的路由守卫可以简单的理解为一座房子的门口的保安,想要进入这个房子就必须通过保安的检查,要告诉路由守卫你从哪里...
  • Vue路由守卫

    2022-03-24 23:38:54
    1、作用:对vue路由进行权限控制 2、分类:全局守卫、独享守卫组件守卫 3、全局守卫 // 全局前置守卫:初始化时执行、每次路由切换前执行 router.beforeEach((to,from,next)=> { // to.meta.isAuth ...
  • vue路由守卫,路由拦截,导航守卫

    千次阅读 2022-04-01 15:11:16
    vue⼀共给我们提供了三种路由守卫 全局路由守卫 前置守卫: router.beforeEach((to,from,next) => {}) to-到哪里去 from --从哪里来 next–重定向 //路由拦截 我们经常使⽤路由守卫实现⻚⾯的鉴权 router....
  • vue2的路由守卫

    2022-04-22 18:56:03
    vue2的路由守卫 路由的导航守卫 又叫做路由的钩子函数(生命周期函数) 就是在跳转页面的 时候把 路由拦下来 做一些操作 再放行 一共有三种 第一种是全局守卫 beforeEach 路由进入之前 afterEach 路由进入之后 第二...
  • vue路由守卫vue中的ajax请求
  • vue Router 路由守卫

    2022-03-13 16:23:36
    路由守卫 是什么 : 简单来说,导航守卫就是路由跳转前、中、后过程中的一些钩子函数,这个函数能让你操作一些其他的事儿,这就是导航守卫。 全局守卫 指路由实例上直接操作的钩子函数,他的特点是所有配置路由的...
  • Vue 路由 导航守卫(全局守卫路由独享守卫组件守卫)

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,896
精华内容 4,358
关键字:

vue组件路由守卫