在typescript中已经定义的属性，访问浏览器提示属性或方法未定义

Question

问题描述

目前有两个vue模版，一个是index，一个是login，在项目初始化的时候默认访问index模版，然后有一个超链接跳转到login，但是在启动的时候提示login的属性没有定义

问题出现的环境背景及自己尝试过哪些方法

使用vscode写的代码
用的是vuejs,typescript,elementui

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

router的index.ts:

import Vue from "vue";
import VueRouter from "vue-router";
import Index from "@/components/Index.vue";
import Login from "@/components/login/Login.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Index",
    component: Index
  },
  {
    path: "/login",
    name: "Login",
    component: Login
  },
  {
    path: "/about",
    name: "About",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue")
  }
];

const router = new VueRouter({
  routes
});

export default router;

main.ts :

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';



Vue.config.productionTip = false;

Vue.use(ElementUI);
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

Index.vue:

<template>
  <div class="index">
    <h1>
      Welcome, Please
      <router-link to="/login">Login</router-link>
    </h1>
  </div>
</template>

<script  lang="ts">
// @ is an alias to /src
import { Vue } from "vue-property-decorator";

export default class Index extends Vue {
   
};
</script>

Login.vue:

<template>
    <div class="login">
    
        <h3>Hello, this is login page</h3>
    
        <h5>account:admin<br />password: admin</h5>
    
        <el-form :label-position="labelPosition" label-width="80px" :model="loginUser">
    
            <el-form-item label="用户名：">
    
                <el-input v-model="loginUser.username"></el-input>
    
            </el-form-item>
    
            <el-form-item label="密码：">
    
                <el-input v-model="loginUser.password"></el-input>
    
            </el-form-item>
    
        </el-form>
    
    </div>
</template>

<script lang="ts">
import { Vue } from "vue-property-decorator"
import LoginEntity from "../../entity/LoginEntity";

export default class Login extends Vue {
    public labelPosition: string = "left";
    public loginUser: LoginEntity = new LoginEntity();
    public username: string = '';
    public password: string = '';
}
</script>

你期待的结果是什么？实际看到的错误信息又是什么？

我期待的结果：首页（index.vue）和登录页面（login.vue）能正常显示
实际错误：访问localhosts:8080/#/后显示空白，浏览器提示login.vue的表单属性没有定义

Answer 1

@Component
export default class Login extends Vue {