vue+typescript 引用router上的属性时编辑器报错

Question

rt
shims-vue.d.ts文件声明如下：

import VueRouter, { Route } from "vue-router";
import Vue from "vue";

declare module "*.vue" {
  export default Vue;
}

declare module "vue/types/vue" {
  interface Vue {
    $router: VueRouter;
    $route: Route;
  }
}

tsconfig文件如下：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

在页面中引用$router属性时报错

看了网上的解决方案（使用[]替代等）都没解决这个报错，好像是编辑器的错误提示问题，该怎么去掉这个？大神请赐教

Answer 1

return (this.$router as any).options.routes

Answer 2

最近也在用vue+ts，这个问题也遇到。
贴下我现在的代码，也是网上看别人的，首先我的shims-vue.d.ts没有改动过。
我改的是main.ts

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import './plugins/element.js';
import axios from './utils/api';
import VueRouter,{ Route } from 'vue-router';

declaremodule 'vue/types/vue'{
  interface Vue {
    $router:VueRouter;
    $route:Route;
    $http:any;
    $Message:any;
  }
}

Vue.prototype.$http = axios;
Vue.config.productionTip = false;

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

vscode插件Vetur Use Workspace Dependencies 这一项启用，或者直接到settings.json里面加上"vetur.useWorkspaceDependencies":true