Vue +TypeScript 关于路由跳转问题

关于vue+ts的路由跳转今天遇到了个问题。
vue项目创建之后，先搞了路由和对应目录，代码如下：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect:'/login'
  },
  {
    path:'/login',
    name: 'login',
    component: () => import(/* webpackChunkName: "login" */ '@/views/login/index.vue')
  },
  {
    path:'/main',
    name: 'main',
    component: () => import(/* webpackChunkName: "main" */ '@/views/main/index.vue'),
    children: [{
      path:'/user',
      name: 'user',
      component: () => import(/* webpackChunkName: "user" */ '@/views/main/user/index.vue')
    },{
      path:'/role',
      name: 'role',
      component: () => import(/* webpackChunkName: "role" */ '@/views/main/role/index.vue')
    },{
      path:'/project',
      name: 'project',
      component: () => import(/* webpackChunkName: "project" */ '@/views/main/project/index.vue')
    }]
  },
]

const router = new VueRouter({
  routes
})

export default router

之后在登录页面加了个路由跳转

<template>
  <div class="login-page">
    <div class="form-block">
      <div class="title-container">
        <h3 class="title">Login</h3>
      </div>
      <el-form :model="formLogin">
        <el-form-item>
          <el-input prefix-icon="el-icon-user" placeholder="请输入用户名" v-model="formLogin.userName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input prefix-icon="el-icon-lock" placeholder="请输入密码" v-model="formLogin.passWord" show-password></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width:100%;" @click="intoPage">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue } from "vue-property-decorator"
import { LoginParams } from '@/types/index'

export default class Login extends Vue {
	private formLogin: LoginParams = {
    userName: '',
    passWord: ''
  }
  private intoPage (): void {
    console.log(1111, this) // 这里打印this是空的
    this.$router.push('/main')
  }
}
</script>

想象是美好的，结果页面并不跳转，报错了！！！

哦豁，找不到$router,然后打印发现this是空的。
然后查了一些文档，有一个如下的配置

但是没起作用。。。这个是将全局变量放到this下面
后来在找了无数资料找到了如下解决方法

  <div class="login-page">
    <div class="form-block">
      <div class="title-container">
        <h3 class="title">Login</h3>
      </div>
      <el-form :model="formLogin">
        <el-form-item>
          <el-input prefix-icon="el-icon-user" placeholder="请输入用户名" v-model="formLogin.userName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input prefix-icon="el-icon-lock" placeholder="请输入密码" v-model="formLogin.passWord" show-password></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width:100%;" @click="intoPage">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue } from "vue-property-decorator"
import Component from 'vue-class-component' // 重点
import { LoginParams } from '@/types/index'

@Component({}) // 重点

export default class Login extends Vue {
	private formLogin: LoginParams = {
    userName: '',
    passWord: ''
  }
  private intoPage (): void {
    console.log(1111, this) // 这里打印出了当前组件
    this.$router.push('/main')
  }
}
</script>

至此解决了。至于为何会这样猜测是使用ts的你的每个组件都需要注册一下。
另 我去掉了上面的那个配置，也是OK的，之后在研究研究。