vue导航守卫

三部分

  1. router(VueRouter实例)守卫 -- 全局路由守卫
  2. router守卫 -- 路由守卫
  3. component守卫 -- 组件守卫

  • const router = new Router({})
  • router.beforeEach(function (to,from,next) {} //
  • export default router
    router.beforeEach(function (to,from,next) {
      // console.log(to,from)
      if(to.name == ‘blog‘) {
        if(to.matched[0].meta.is_login) {
          next()
        }else{
          console.log("login")
          next({name: ‘login‘})
        }
      }else if(to.name == ‘login‘) {
        if(to.matched[0].meta.is_login) {
          next({name: from.name})
          console.log(from)
        }else {
          next()
        }
      }else {
        next()
      }
    })
    <template>
        <button @click=‘login‘>LOGIN</button>
    </template>
    <script>
    export default {
        created() {
            // console.log(this.$route)
        },
        methods: {
            login() {
                // console.log(this.$route)
                this.$route.matched[0].meta.is_login = true;  //
                this.$router.push({name: ‘blog‘})  //
            }
        }
    }
    </script>

Vue.use(Router)

const router =  new Router({
  routes: [
    {
      path: ‘/login‘,
      name: ‘login‘,
      component: Login,
      meta: {
        index: 3,
        is_login: true
      },
      beforeEnter(to,from,next) {
        // console.log(to,from)
        if(to.meta.is_login) {
          next({name:from.name})
        }else{
          next()
        }
      }
    }
  ]
})

router.beforeEach(function (to,from,next) {
  // console.log(to)
  if(to.name == ‘blog‘) {
    if(to.matched[0].meta.is_login) {
      next()
    }else{
      // console.log("login")
      next({name: ‘login‘})
    }
  }else if(to.name == ‘login‘) {
    if(to.matched[0].meta.is_login) {
      next({name: from.name})
      // console.log(from)
    }else {
      next()
    }
  }else {
    next()
  }
})

export default router

3.

未完待续



vue导航守卫

原文地址:https://www.cnblogs.com/goff-mi/p/9392402.html

时间: 2024-11-08 15:47:01

vue导航守卫的相关文章

Vue导航守卫beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave详解

Vue导航守卫以我自己的理解就是监听页面进入,修改,和离开的功能.每个守卫接受三个参数 to: Route: 即将要进入的目标路由对象 from: Route: 当前导航正要离开的路由 next: Function: 一定要调用该方法来 resolve 这个钩子.执行效果依赖 next 方法的调用参数. next(): 进行管道中的下一个钩子.如果全部钩子执行完了,则导航的状态就是 confirmed (确认的). next(false): 中断当前的导航.如果浏览器的 URL 改变了(可能是用

vue导航守卫和axios拦截器的区别

在Vue项目中,有两种用户登录状态判断并处理的情况,分别为:导航守卫和axios拦截器. 一.什么是导航守卫? vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.(在路由跳转时触发) 我们主要介绍的是可以验证用户登录状态的全局前置守卫,当一个导航触发时,全局前置守卫按照创建顺序调用.守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于等待中. const router = new VueRouter({ ... }) router.beforeEach(

vue 导航守卫,验证是否登录

路由跳转前,可以用导航守卫判断是否登录,如果登录了就正常跳转,没有登录就把路由指向登录页面. router.beforeEach((to, from, next) => { const nextRoute = [ 'api', 'my/index, 'course']; if(nextRoute.indexOf(to.name) >= 0){ //可以在这里面判断是否登录了 if (!store.state.auth.IsLogin) { vueRouter.push({name: 'logi

Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]

前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比较高频的考点,那么该如何回答这类问题,让人有眼前一亮的感觉呢... 前端进阶积累.公众号.GitHub Vue-Router导航守卫: 有的时候,我们需要通过路由来进行一些操作,比如最常见的登录权限验证,当用户满足条件时,才让其进入导航,否则就取消跳转,并跳到登录页面让其登录. 为此我们有很多种方法

vue之路由导航守卫-全局前置守卫

一.使用方式 全局前置守卫用于在路由配置生效之前进行一些动作,可以使用 router.beforeEach 注册一个全局前置守卫: const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... }) 参数: to: Route: 即将要进入的目标 路由对象 from: Route: 当前导航正要离开的路由 next: Function: 一定要调用该方法来 resolve 这个钩子.执行效

VUE—路由(四)导航守卫&amp;动态路由

1.在个人中心中做个表单,当表单中有内容时,跳转到其他页面做个提醒 除了beforeRouteLeave在组件中还有其他路由函数,统称导航守卫 2.当从个人中心跳到学术讨论的时候,学术讨论页面也知道跳转进来了,这个函数叫beforeRouteEnter 原文地址:https://www.cnblogs.com/tianya-guoke/p/11509461.html

八、Vue Router 进阶-导航守卫

导航守卫 所谓的导航守卫,就是路由的钩子函数.主要用来通过跳转或取消导航.导航守卫分三种:全局.路由独享.组件级的. 注意:参数或查询的改变并不会触发进入和离开的导航守卫.可以通过watch监听$route对象,或使用beforeRouteUpdate的组件内守卫. 全局前置守卫 进入路由之前的钩子函数,接受next函数,在此可以阻止进入路由或跳转到指定路由. <script> const router = new VueRouter({ ... }); // 接收三个参数:to为目标路由对象

Vue中的导航守卫(路由守卫)

当做Vue-cli项目的时候感觉在路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-router 提供的 beforeEach可以方便地实现全局导航守卫(navigation-guards).组件内部的导航守卫函数使用相同,只是函数名称不同(beforeRouteEnter .beforeRouteUpdate(2.2 新增) .beforeRouteLeave). 官方文档地址:https://router.vuejs.org/zh-cn/advanced/navigat

vue项目常见之五:路由拦截器(permission),导航守卫

// 处理路由拦截器 导航守卫 import router from '../router' import progresss from 'nprogress' import 'nprogress/nprogress.css' // 全局前置守卫 当 路由发生变化时 这个方法里的回调函数就会执行 router.beforeEach(function (to, from, next) { progresss.start() // 开启进度条 // 权限拦截 认为有token 让过去 没token不