精华内容
下载资源
问答
  • Vue-router路由守卫

    2020-03-25 21:16:41
    实现效果: 查看某个页面时, 要求必须是已登录状态才允许查看 ...解决:通过Vue-router路由守卫 vue中路由守卫一共有三种: 全局路由守卫,组件内路由守卫,router独享守卫 1.路由独享守卫 路由独享守卫是在路由配置页...

    实现效果: 查看某个页面时, 要求必须是已登录状态才允许查看

    如视频 :对武汉页面进行守卫

    路由守卫小demo

    解决:通过Vue-router路由守卫

    vue中路由守卫一共有三种: 全局路由守卫,组件内路由守卫,router独享守卫

    1.路由独享守卫

    路由独享守卫是在路由配置页(router/index.js)的路由表中, 单独给某个路由配置的一个守卫在这里插入图片描述
    在这里插入图片描述

    了解3个参数: ①to:表示要去哪里 ②from:表示从哪里来 ③next:放不放行
    next()参数配置 :
    next()等价于 next( true ) 表示通过, 允许从当前路由跳转到目标路由
    next( false )表示不通过, 不允许从当前路由跳转到目标路由
    next("/login")等价于next(path:"/login")跳转指定的路由

    完整代码:

    const routes = [
      //citys根路由
      { path: '/citys',
        component: citys,
        //子路由
        children: [
          { path: 'wh', 
            component: wh,
            //保卫武汉
            beforeEnter:(from,to,next)=>{
            //假设,判断条件为,是否已经登录;已登录,放行,允许看武汉页面;未登录,禁止,不允许看武汉页面,并提示用户去登录
            //尝试从sessionStorage获取用户名,如果能获取到,代表已经登录过
            var uname=sessionStorage.getItem('uname')
              if(uname){
                next()
              }else{
                alert("请先登录,才能查看武汉界面哦")
                next({path:"/login"})
              }
            }
          },
          { path: 'bj', component: bj },
          { path: 'sh', component: sh },
          { path: 'gz', component: gz },
          { path: 'sz', component: sz },
        ]
      }]
    

    2.组件路由守卫

    组件路由守卫是写在每个单独的vue文件里面的路由守卫
    methods: {...}等同级别书写

    1.进入组件时触发
    beforeRouteEnter (to, from, next) {
        // 注意,在路由进入之前,组件实例还未渲染,所以无法获取this实例
        // 如果,非要访问this ,必须通过 next(vm=>{})来访问组件实例
        next(vm => {......})
    }
    2.同一页面,刷新不同数据时调用
    beforeRouteUpdate (to, from, next) {
        // 例如,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候
        // 可以访问组件实例 this
    }
    3.离开当前路由页面时调用
    beforeRouteLeave (to, from, next) {
       // 可以访问组件实例 this
    }
    

    3.全局路由守卫

    全局前置守卫是写在入口文件 main.js 中的,在进入路由前执行

    1.全局前置路由守卫,
    router.beforeEach((to, from, next) => {
      //增加一步: 先明确需要给哪个页面,添加守卫
      if (to.path == "/citys/wh") {
        //同样,尝试从sessionStorage获取用户名,如果能获取到,代表已经登录过
        var uname = sessionStorage.getItem('uname')
        if (uname) {
          next()
        } else {
          alert("请先登录,才能查看武汉界面哦")
          next({ path: "/login" })
        }
      }else if(to.path == "/citys/bj"){
        alert("北京页面挂了,看看上海吧")
        next({ path: "/citys/sh" })
      }else{//如果不是去武汉页面,也不是去北京页面,就直接放行
         next()
      }
    })
    
    2.全局后置路由守卫,离开当前路由时执行
    router.afterEach( (to,from,next)=> {
      if(to.path === '/video'){ //当to的path值等于这个时
        alert('确定进入video吗') //一般可以做一些用户友好提示
      }
    })
    
    展开全文
  • 导航守卫也叫路由守卫vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。 当路由跳转前或跳转后、进入、离开某一个路由前、后,经常需要做某些操作,可以使用路由钩子来监听路由的变化。 钩子与...

    在Vue项目中,路由跳转前经常要做一些验证,如登录验证,权限验证等,是应用中的普遍需求,可以通过导航守卫来实现。导航守卫也叫路由守卫,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。

    路由生命周期

    和组件一样,路由也有生命周期,生命周期的钩子函数称为路由守卫。

    vue-router提供的路由守卫通过跳转或取消的方式守卫导航,守卫的应用场景有全局守卫、路由独享的守卫 、组件内的守卫。

    路由守卫构造函数通常有3个参数:

    1、to 路由对象,要进入的目标路由对象
    2、from 路由对象 ,要离开的路由对象
    3、next 函数, 用于结束当前钩子

    一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数

    • next() 无参数表示进入下一个生命周期,如果所有的 钩子函数都执行完了(生命周期/守卫),则导航状态就是confirmed(确认的)
    • next(false)中断当前导航,重置到 from 路由对应的地址。
    • next(’/xx’) 或者 next({path:’/xxx’})中断当前的导航, 进行一个新的导航,跳转到一个指定的 地址。

    全局守卫

    全局钩子函数在定义全局路由时使用,通常用路由实例的原型上有两个钩子:beforeEachafterEach,用beforeEach钩子来实现全局前置守卫。

    const router = new VueRouter({ ... })
    /*前置全局守卫,路由跳转之前执行,参数to,from,next
    * to:Route 要进入的目标路由对象
    * from:Route 要离开的路由对象
    * next:Function 决定跳转或取消导航,next函数指定下一步操作,从而结束这个钩子
    * */
    router.beforeEach((to, from, next) => {
      // ...
      next()
    })
    /*后置全局守卫,跳转之后执行,参数to,from
    * to:进入的目标路由对象
    * from:离开的路由对象
    * */
    router.afterEach((to,from)=>{
     //...
    })
    

    在本例中
    1、使用全局前置守卫beforeEach验证用户是否已经登录,如果没登录跳转到登录页(假设sessionStorage中字段login-Token有值就是登录)
    2、使用全局后置守卫afterEach修改浏览器的标题栏

    router.beforeEach((to,from,next)=>{
      const token = sessionStorage.getItem('login-Token')
      if(['/login','/404'].indexOf(to.path) !== -1){
        next();
      }else{
        token ? next() : next('/login');
      }
    })
    router.afterEach((to,from)=>{
      window.document.title=to.meta.title
    })
    

    路由独享的守卫

    单个路由有个钩子beforeEnter
    以login所在的路由对象为例,修改路由配置,实现如果用户已经登录,跳转到首页

    {
        path: '/login',
        component: Login,
        beforeEnter :(to, from, next) => {
          console.log('login路由独享守卫')
          const token = sessionStorage.getItem('login-Token')
          if(token){
            next('/')
          }else{
            next()
          }
        }
    

    组件内的守卫

    可以在Vue组件内,利用钩子beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave定义组件内的守卫

    1、beforeRouteEnter(to,from,next)

    组件内部先执行beforRouteEnter,再执行组件周期钩子函数beforeCreate,所以在执行beforRouteEnter钩子函数时,内部 this 是undefined

    2、beforeRouteUpdate(to,from,next)

    组件被复用且当前路由改变时,会触发路由钩子函数beforeRouteUpdate,内部可以访问组件实例 this

    3、beforeRouteLeave(to,from,next)

    导航离开该组件的对应路由时调用,内部可以访问组件实例 this

    下面以login组件为例,下面利用beforeRouteEnter钩子实现login独享的守卫一样的功能

    const Login = {
      template: `<div><h1>登录</h1></div>`,
      beforeRouteEnter(to, from, next){
        const token = sessionStorage.getItem('login-Token');
        if(token){
          next('/')
        }else{
          next()
        }
      }
    };
    

    官方完整的导航解析流程

    导航被触发。
    在失活的组件里调用离开守卫。
    调用全局的 beforeEach 守卫。
    在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
    在路由配置里调用 beforeEnter。
    解析异步路由组件。
    在被激活的组件里调用 beforeRouteEnter。
    调用全局的 beforeResolve 守卫 (2.5+)。
    导航被确认。
    调用全局的 afterEach 钩子。
    触发 DOM 更新。
    用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

    与Vue 实例 生命周期(钩子函数)执行顺序比较
    (离开组件的)beforeRouteLeave >>> beforeEach(全局路由) >>>(跳转到的路由组件内的) beforeRouteEnter >>> afterEach(全局路由) >>> vue实例的生命周期

    展开全文
  • vue-router 路由守卫

    2020-10-05 08:13:40
    文章目录vue-router路由守卫组件内守卫beforeRouteEnterbeforeRouteUpdatebeforeRouteLeave路由守卫参数tofromnext路由独享的守卫全局守卫beforeEachbeforeResolveafterEach 路由守卫 当导航发生改变的时候,vue-...

    vue-router

    路由守卫

    当导航发生改变的时候,vue-router 会在多个不同的地方调用指定的函数,也就是与路由有关的生命周期函数,也称为:路由守卫

    • 组件内守卫
    • 路由独享守卫
    • 全局守卫

    组件内守卫

    定义在组件内的与路由有关的生命周期函数(守卫)

    • beforeRouteEnter
    • beforeRouteUpdate
    • beforeRouteLeave

    beforeRouteEnter

    当路由解析完成,并中指定的组件渲染之前(组件 beforeCreate 之前),不能这里通过 this 访问组件实例,需要通过 next 回调来进行调用

    beforeRouteEnter (to, from, next) {
        // 不!能!获取组件实例 `this`
        // 因为当守卫执行前,组件实例还没被创建
      	next(vm => {
          // vm...
        })
    }
    

    beforeRouteUpdate

    在当前路由改变,但是该组件被复用时调用

    beforeRouteUpdate (to, from, next) {
        // 可以访问组件实例 `this`
    },
    

    beforeRouteLeave

    导航离开该组件的对应路由时调用

    beforeRouteLeave (to, from, next) {
        // 可以访问组件实例 `this`
    }
    

    路由守卫参数

    to

    即将要进入的目标 路由对象($route)

    from

    当前导航正要离开的路由对象($route)

    next

    路由确认回调函数,类似 Promise 中的 resolve 函数,一定要确保调用 next 函数,但是后续的导航行为将依赖 next 方法的调用参数

    • next() : 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)

    • next(false) : 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址

    • next('/') 或者 next({ path: '/' }) : 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航

    路由独享的守卫

    可以在路由配置上直接定义 beforeEnter 守卫,相对来说,应用不多

    const router = new VueRouter(
      { 
        routes: [ 
          { 
            path: '/foo', 
            component: Foo, 
            beforeEnter: (to, from, next) => { 
              // ... 
          	}
        	} 
        ] 
      }
    )
    

    全局守卫

    全局守卫是注册在 router 对象(new VueRouter({…}))上的

    • beforeEach
    • beforeResolve
    • afterEach

    beforeEach

    当一个导航触发时,全局前置守卫按照创建顺序调用

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

    beforeResolve

    在所有组件内守卫和异步路由组件被解析之后被调用

    router.beforeResolve((to, from, next) => {
      // ...
    })
    

    afterEach

    导航被确认后调用

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

    因为导航已经被确认,所以没有 next

    展开全文
  • 学习vue-router路由守卫

    千次阅读 多人点赞 2020-10-11 17:45:42
    使用vue的时候总会使用到前端vue-router路由,检验登陆状态,检验是否路由跳转,就需要路由守卫来解决,这一篇文章教会你使用路由守卫。 这里写目录标题一,全局路由守卫二,路由独享的守卫三,组件内的路由守卫 一...

    导语:
    使用vue的时候总会使用到前端vue-router路由,检验登陆状态,检验是否路由跳转,就需要路由守卫来解决,这一篇文章教会你使用路由守卫。

    一,全局路由守卫

    我们在前端项目里面的main.js文件

    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import store from './store'
    router.beforeEach((to, from, next) => {
      // ...
    });
    new Vue({
      el: "#app",
      store,
      router,
      components: { App },
      template: "<App/>"
    });
    

    这是全局路由守卫,每次路由跳转的时候,都会触发这个函数。

    to就是去的路由
    from是跳转前的路由
    next就是确认跳转

    这个全局的路由守卫,可以用来检验网址用户是否已经登陆,因为每次跳转的时候,都会执行这个函数,只要我们在这个函数里面,设置就行了。

    如下:

    router.beforeEach((to, from, next) => {
    	//vuex里面的userinfo是否已经存在,不然就直接跳转到登录页面
      if(store.state.userInfo || to.path === "/login") {
          next();
       } else {
         next({
           path: "/login"
         })
       }
    });
    
    

    二,路由独享的守卫

    指某个路由页面独享这个守卫,其他的路由不能使用,提高了路由守卫的灵活性。

    routes: [
      {
        path: "/home",
        component: home,
        beforeEnter: (to, from, next) => {
        //进入这个路由前,检验登陆
          if(store.state.userInfo || to.path === "/login") {
          next();
    	  } else {
    	    next({
    	      path: "/login"
    	    })
    	  }
        }
      }
    ];
    

    三,组件内的路由守卫

    判断用户要离开该路由的时候,检验是否用户已经保存该编辑页面内容,如果没有,跳出提示框,是否不保存离开该页面。

    <template>
      <h1>xiaomizhou</h1>
    </template>
     
    <script>
        export default {
          data(){
              return{
                name:"xiaomizhou"
              }
          },
          //路由进入前调用
          beforeRouteEnter:(to, from, next)=>{
             alert("Hello"+this.name); 
             alert(to.path + from.path); 
             next();
            next(vm => {
              alert("Hello"+vm.name);
            })
          },
          //路由离开时调用,可以用在编辑页面
          beforeRouteLeave:(to, from, next) => {
            if(confirm("离开该页面,不会保存你的操作,确认离开吗?") == true){
              next();
            }else{
              next(false);
            }
          }
        }
    </script>
    
    

    补充

    在这里插入图片描述

    微信搜索【web小馆】

    回复 【书籍】,即可获取 前端学习资料

    回复 【全栈博客项目】,即可获取项目源码
    每天用最简单朴实的语言,潜移默化的提升你的计算机基础知识和前端技术。小米粥,一个专注的web全栈工程师,我们下期再见!

    在这里插入图片描述
    node后台

    展开全文
  • react-router没有vue-router 的beforeEach钩子函数,可以使用react-router-config这个库去实现权限控制。 :所用react-router版本4.X import React from 'react' import { Route, Redirect, Switch } from 'react...
  • Vue RouterVue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有: 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡...
  • Vue-router 路由守卫

    2019-09-23 10:33:36
    Vue-router 路由守卫 const router = new VueRouter({ ... }) 前置路由守卫 router.beforeEach((to,from,next) => { // to 下一跳路由路径地址 // from 上次路由地址对象 // next 回调钩子...
  • vue-router路由守卫

    2021-01-14 11:37:21
    路由守卫 vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。 分为三种:全局守卫、路由独享守卫、组件内守卫 全局守卫 在...
  • 对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards)。导航守卫(navigation-guards)这个名字,听起来怪怪的,但既然官方文档是这样翻译的,就姑且这么叫吧。贴上文档地址:...
  • VueRouter路由守卫

    2021-04-03 20:37:45
    1.路由守卫是什么? 路由守卫简单的来说就是路由在跳转的时候所触发的一些钩子函数 2.导航守卫的分类 1)全局前置守卫——发生在路由跳转前 当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析...
  • vue-router路由守卫基本使用 作用 通过路由拦截,来判断用户是否登录,该页面用户是否有权限浏览 全局路由守卫 全局前置守卫:路由跳转前调用 router.beforeEach((to,from,next)=>{ console.log(to); // 即将...
  • vue-router路由守卫 、路由传参 及 使用,Comming!
  • 在使用vue的路由功能,在进入某一个路由的时候路由守卫方法被调用,检查该路由是否被准许通行,有一些路由不需要限制就直接next()下一步不做任何操作。 // 全局路由导航拦截 路由守卫 router.beforeEach((to, from...
  • Vue Router 路由守卫(前置守卫)的初步使用示例代码关于前置守卫形参to:Route: 即将要进入的目标 路由对象from:Route: 当前导航正要离开的路由next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果...
  • 本文将使用Vue-Router中的路由守卫功能实现权限控制和加载进度。 路由守卫 Vue-Router提供了两个钩子函数,分别是前置守卫beforeEach和后置守卫afterEach,其中前置守卫在路由跳转前触发,后置守卫在路由跳转后触发...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,627
精华内容 650
关键字:

router路由守卫vue

vue 订阅