• TypeScripy + Vue Property Decorator + Vue Router,组件内的导航守卫无效


    组件内守卫

    1. beforeRouteEnter
    2. beforeRouteUpdate (2.2 新增)
    3. beforeRouteLeave
    4. 官网链接

    注意事项

    • 直接在class中定义这3个钩子函数无效,函数不会触发

    • 需要先registerHooks,如下

    • 方式一(直接在组件中register)
    <template>
        <h1>直接在class中定义这3个钩子函数无效不会触发,需要先`registerHooks`</h1>
    </template>
    
    <script lang='ts'>
        import { Component, Vue } from "vue-property-decorator";
    
        @Component({
            beforeRouteEnter(to, from, next) {
                // 在渲染该组件的对应路由被 confirm 前调用
                // 不!能!获取组件实例 `this`
                // 因为当守卫执行前,组件实例还没被创建
                console.log("路由进来了");
                next();
            },
            beforeRouteUpdate(to, from, next) {
                // 在当前路由改变,但是该组件被复用时调用
                // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
                // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
                // 可以访问组件实例 `this`
                console.log("路由更新了");
                next();
            },
    
            beforeRouteLeave(to, from, next) {
                // 导航离开该组件的对应路由时调用
                // 可以访问组件实例 `this`
                console.log("路由离开了");
                next();
            }
        })
        export default class Chat extends Vue {
            
        }
    </script>
    
    • 方式二(在全局register,注册后就可以在class中正常使用)
    import { Component } from "vue-property-decorator";
    
    Component.registerHooks(["beforeRouteEnter", "beforeRouteLeave", "beforeRouteUpdate"]);
    
  • 相关阅读:
    程序员的四个阶段
    2010Year Plans
    HttpHandler HttpModule入门篇
    Lucene.net索引文件的并发访问和线程安全性
    stream流写到MemoryStream内存流引发得问题
    ASP.NET 2.0 多文件上传小经验
    HTML 迷魂灯
    如何在Windows下搭建Android开发环境
    利用Lucene.net搭建站内搜索(4)数据检索
    数据加密和解密
  • 原文地址:https://www.cnblogs.com/guojiabing/p/12194239.html
Copyright © 2020-2023  润新知