• 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>
  • 相关阅读:
    mac下xcode中include path
    如何联机调试和发布程序
    Facebook 错误码
    app store给应用评分功能
    FTP传输模式
    重新安装 Visual Studio 6.0 的问题
    ASP项目:提示用户 'NT AUTHORITY\NETWORK SERVICE' 登录失败
    投资项目的4P
    .net 的资源与本地化
    千万不能干的事(文摘)
  • 原文地址:https://www.cnblogs.com/bao2333/p/10278920.html
Copyright © 2020-2023  润新知