vue中的导航守卫

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
    /* 
      全局前置守卫 
        beforeEach((to, from, next) => {})
      全局解析守卫
        beforeResolve((to, from, next) => {})
      全局后置钩子
        afterEach((to, from) => {})
    
        router.全局守卫((to, from, [next]) => {})

      路由独享守卫
        beforeEnter((to, from, next) => {})

        在配置路由是写在路由配置对象上的
        routes: [
          {
            path: '/',
            component: index, 
            beforeEnter (to, from, next) => {

            }
          }
        ]

      组件内守卫
        beforeRouteEnter((to, from, next) => {})
        beforeRouteUpdate((to, from, next) => {})
        beforeRouteLeave((to, from, next) => {})

        组件内守卫写在组件内和组件生周期钩子函数的写法相同
        const component = {
          template: ``,
          beforeRouteEnter (() => {}),
          beforeRouteUpdate (() => {}),
          beforeRouteLeave(() => {})
        }
    */  
    

    /* 
      三种页面跳转
        1 直接刷新页面
          beforeEach
          / beforeEnter
          组件中的beforeRouteEnter
          全局解析守卫
          全局后置守卫
          路由跳转结束后
          开始组件生命周期

          创建前
          创建后
          挂载前
          挂载后

        2 路由改变但组件不变
          全局前置守卫触发
          组件内beforeRouteUpdate触发
          beforeResolve
          afterEach
        3 路由改变组件改变
          组件内beforeRouteLeave
          beforeEach
          to组件的路由独享守卫触发
          to组件的beforeRouteEnter触发
          beforeResolve
          afterEach

          to组件创建
          to组件挂载前
          from组件销毁
          to组件挂载

    
        
      beforeRouteLeave
      beforEach

      beforeRouteUpdate
      beforeEnter 

      beforeRouteEnter
      beforeResolve
      afterEach


      beforeRouteEnter中的this指向window，因为在其触发时组件还没有被创建
    */
  </script>

  <div id="app">
    <nav>
      <router-link to="/">首页</router-link>
      <router-link to="/page">子页面</router-link>
    </nav>
    <router-view></router-view>
  </div>


  <script src="../vue.js"></script>
  <script src="../vue-router.js"></script>
  <script>
    const Index = {
      template: `
        <div>首页</div>
      `,
      beforeCreate () {
        console.log('首页组件创建前')
      },
      created () {
        console.log('首页组件创建后')
      },
      beforeMount() {
        console.log('首页组件挂在前')
      },
      mounted () {
        console.log('首页组件挂在后')
      },
      beforeDestroy () {
        console.log('首页销毁前')
      },
      destroyed () {
        console.log('首页销毁后')
      },
      beforeRouteEnter(to, from, next){
        console.log('首页组件的enter守卫')
        console.log(this)
        next((vm)=>{
          console.log(vm)
        })
      },
      beforeRouteUpdate(to, from, next){
        console.log('首页组件的update守卫')
        console.log(this)
        next()
      },
      beforeRouteLeave(to, from, next){
        console.log('首页组件的leave守卫')
        console.log(this)
        next()
      },
    }

    const Page = {
      template: `
        <div>子页面</div>
      `,
      beforeCreate () {
        console.log('page组件创建前')
      },
      created () {
        console.log('page组件创建后')
      },
      beforeMount() {
        console.log('page组件挂在前')
      },
      mounted () {
        console.log('page组件挂在后')
      },
      beforeRouteEnter(to, from, next){
        console.log('page组件的enter守卫')
      },
      beforeRouteUpdate(to, from, next){
        console.log('page组件的update守卫')
        next()
      },
      beforeRouteLeave(to, from, next){
        console.log('page组件的leave守卫')
        next()
      },
    }

    const router = new VueRouter({
      routes: [
        {
          path: '/',
          component: Index,
          beforeEnter (to, from, next) {
            console.log('/ 路由的独享守卫触发')
            next()
          }
        }, {
          path: '/page',
          component: Page,
          beforeEnter (to, from, next) {
            console.log('/page 路由的独享守卫触发')
            next()
          }
        }
      ]
    })

    router.beforeEach((to, from, next) => {
      console.log('全局前置守卫触发')
      next()
    })
    router.beforeResolve((to, from, next) => {
      console.log('全局解析守卫触发')
      next()
    })
    router.afterEach((to, from) => {
      console.log('全局后置守卫触发')
    })


    const app = new Vue({
      el: "#app",
      router
    })
  
  </script>
</body>
</html>
posted @ 2019-01-16 19:27 宝2333 阅读(379) 评论(0) 收藏举报
刷新页面返回顶部
宝2333

vue中的导航守卫

公告
