zoukankan      html  css  js  c++  java
  • 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.

    未完待续


    html&css
  • 相关阅读:
    Oracle 19.3 RAC on Redhat 7.6 安装最佳实践
    宝宝换牙期 需要注意这几点
    人生与机会
    历届「Jolt Awards」获奖书籍
    语言包缩写
    用XMLTask操作XML
    clearcase命令(转)
    【ZT】我家宝宝不会哭分享在美国养孩子的妈妈经(必看)
    Ubuntu启动问题以及Grub Rescue修复方法
    几个远程桌面客户端
  • 原文地址:https://www.cnblogs.com/goff-mi/p/9392402.html
Copyright © 2011-2022 走看看