美文网首页
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路由不正常跳

    最近经常看到Typescript的一些文章。决定自己也尝试用一下,写了一个移动端和PC端的项目模板。感觉还不错。可...

  • Vue 基础 - 前端路由

    使用vue-router实现前端路由 安装vue-router: 配置路由文件,并在vue实例中导入: 设置视图(...

  • vue-router

    前端路由的基本原理 vue-router的基本使用 命名路由 路由参数 嵌套路由

  • 一起学Vue:路由(vue-router)

    前言 学习vue-router就要先了解路由是什么?前端路由的实现原理?vue-router如何使用?等等这些问题...

  • Vue学习笔记[13]-使用vue-router

    在使用vue cli创建项目时可以添加vue-router,或使用npm安装vue-router 配置路由跳转: ...

  • 2018-09-23 vue初学九(路由)

    路由 vue-router是Vue的工具库使用路由需要导入router库,和vue.js一起使用 路由的使用分为四...

  • Vue.js 学习笔记(三)

    路由 vue-router 的基本使用 定义组件 定义 vue-router 关联到 Vue 实例 实现 效果展示...

  • VUE路由的简单使用

    VUE中如何使用路由? 路由的基本使用 在html中 引入vue 和 vue-router 包 创建vue对象并将...

  • Vue之vue-router路由

    八、vue-router路由 目录:使用、测试 1.使用 1)说明Vue Router是Vue.js官方的路由管理...

  • 与Vue.js的第九天

    今天学习了路由 路由 路由 路由vue-router是vue的核心组件根据不同的url访问不同页面配合单页面使用 ...

网友评论

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

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