• 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"]);
    
  • 相关阅读:
    给多个表的Dimension字段赋初值
    第十七章 性能(一)
    终于看到Inside Microsoft Dynamics Ax4.0了
    Snapin
    添加图片
    PHP功能齐全的发送邮件类,可以发送HTML和附件
    js重写的美化版select控件
    纯CSS的下拉菜单 支持IE6 IE7 Firefox
    BluePage通用分页类
    论坛结构改动,URL重写不影响收录地址的访问代码
  • 原文地址:https://www.cnblogs.com/guojiabing/p/12194239.html
Copyright © 2020-2023  润新知