美文网首页
Vue+Typescript使用vue-router路由不正常跳

Vue+Typescript使用vue-router路由不正常跳

作者: pppercywang | 来源:发表于2019-07-08 19:36 被阅读0次

    最近经常看到Typescript的一些文章。决定自己也尝试用一下,写了一个移动端和PC端的项目模板。感觉还不错。可能vue2.x和对ts的支持不是很好(期待vue3,将用ts重构)。期间遇到了一个最大的坑,找了挺久没有找到问题所在,最后解决了。跟大家分享一下

    页面上报的错:

    1. Property or method "xxx" is not defined on the instance but referenced during render
    2. Uncaught TypeError: Cannot create property 'isRootInsert' on string 'xxx'
    3. Error in nextTick: "TypeError: Cannot read property '_enterCb' of undefined"
    4. TypeError: Cannot read property '_enterCb' of undefined

    第一个错误你会很纳闷,明明我定义了这个变量,但是还是说not defined
    然后就是路由跳转的问题,你会发现路由会变,但是视图不能正常的渲染
    找了很久都找不到答案,搞了一天,终于发现了问题的所在

    A.vue

    <template>
      <div class="home">
       {{msg}}
      </div>
    </template>
    <script lang='ts'>
    import { Component, Vue, Watch, Prop } from "vue-property-decorator";
    import { Action, Mutation, State, Getter } from "vuex-class";
    @Component({
      components: {
      }
    })
    export default class  extends Vue {
     private msg: string = '我是一个msg';
    }
    </script>
    <style lang="sass">
    </style>
    

    解决方法:

    原因是我们没有注册这个组件。通常我们在写vue的时候,如果不用其他的组件就不会用Component注册组件
    但这里不管你用不用,都要写@Component。不然就会出现以上问题

    @Component({
      components: {
      }
    })
    

    Vue+Typescript的PC端管理平台模板:

    https://github.com/pppercyWang/vue-typescript-admin

    Vue+Typescript的移动端项目模板:

    https://github.com/pppercyWang/vue-typescript-mobile

    相关文章

      网友评论

          本文标题:Vue+Typescript使用vue-router路由不正常跳

          本文链接:https://www.haomeiwen.com/subject/ylaahctx.html