关于vue2引入ts vue-router自定义属性报错问题

permission.ts

在引入了封装的 router，并自定义了一个方法，报错。router.selfaddRoutes
同时，导入的Router页也报错 new Router().matcher

以下是封装的 router.js

鼠标放红色波浪线上提示什么，可能是 ts类型错误吧

补充
提示
在引入了封装的 router，并自定义了一个方法，报错。router.selfaddRoutes
同时，导入的Router页也报错 new Router().matcher

类型“VueRouter”上不存在属性“matcher”。ts(2339)

ts有着严格的类型推断，不允许添加没有声明的属性和方法。建议使用any做一个转换。
第9行改成如下代码。其他地方也类似的修改

(router as any).selfaddRoutes = ...

可以参考一下我这个自定义的方法

以下答案由GPT-3.5大模型与博主波罗歌共同编写：
对于 Vue2 中引入 TypeScript 的 Vue Router，需要先安装相应的依赖：

npm install vue-router@3.3.4 @types/vue-router@3.0.2 typescript@3.9.3 --save-dev

其中，vue-router 是 Vue Router 本体，@types/vue-router 则是用于 TypeScript 的类型定义文件，typescript 则是 TypeScript。

接着，在 tsconfig.json 中，开启 strict 选项：

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

在 Vue 组件中使用自定义方法，需要在 vue-router 文件中定义该方法的类型，才会通过编译。以下是定义自定义方法的示例：

import { Route } from 'vue-router';
declare module 'vue-router' {
  interface RouteMeta {
    permission?: string[]
  }
  interface Route {
    meta: RouteMeta
  }
}

其中，RouteMeta 为自定义属性的类型，例如上面的 permission 是一个数组，所以类型为 string[]；而 Route 则是 Vue Router 的原型中的路由对象。

完整的 router.js 封装示例代码如下：

import Vue from 'vue'
import Router, { Route } from 'vue-router'
Vue.use(Router)

declare module 'vue-router' {
  interface RouteMeta {
    permission?: string[]
  }
  interface Route {
    meta: RouteMeta
  }
}

const routes = [
  {
    path: '/',
    component: () => import('@/views/Home.vue'),
    meta: {
      permission: ['admin']
    }
  },
  {
    path: '/about',
    component: () => import('@/views/About.vue'),
    meta: {
      permission: ['editor']
    }
  }
]

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

// 在Router原型上添加selfAddRoutes方法
router.selfAddRoutes = function (routes) {
  router.matcher = new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
  }).matcher
}

export default router

上面的示例中，首先定义了自定义属性 permission，然后在 routes 中使用了该属性，接着在 router 对象上添加了自定义方法 selfAddRoutes，并在其中重新构造了一个新的 matcher，赋值给了 router.matcher。因此，在使用自定义方法时，直接调用 router.selfAddRoutes(routes) 即可。

这样，在 Vue 组件中，就可以直接使用 $router 对象，并调用自定义方法来实现动态添加路由。例如：

export default {
  methods: {
    addRoutes(routes: Route[]) {
      this.$router.selfAddRoutes(routes)
    }
  }
}

其中，Route 为 Vue Router 的原型中的路由对象类型。
如果我的回答解决了您的问题，请采纳！

不知道你这个问题是否已经解决, 如果还没有解决的话:

以下回答来自chatgpt:
因为Vue2自身并不支持TypeScript的语法，需要额外安装对应的TypeScript插件和声明文件。同时，在自定义vue-router属性时，需要正确引入router.js，否则会出现router.selfaddRoutes错误和new Router().matcher错误。解决方法如下：
1. 安装TypeScript插件和声明文件
（1）安装依赖：npm i typescript ts-loader -D
（2）新建tsconfig.json文件，并配置以下内容：
{ "compilerOptions": { "target": "es6", //使用ES6标准 "module": "es6", //模块同样使用ES6标准 "strict": true, "jsx": "preserve", "sourceMap": true, "esModuleInterop": true, "moduleResolution": "node", "forceConsistentCasingInFileNames": true }, "include": [ "src/*/" ], "exclude": [ "node_modules" ] }
（3）如果使用的是VS Code编辑器，可在.vscode文件夹下新建settings.json文件，并添加以下内容：
{ "typescript.tsdk": "node_modules/typescript/lib" }
1. 引入router.js并自定义方法
（1）将router.js文件夹下的文件以.ts格式重命名，并将封装的自定义方法添加到对应文件中。
例如，在permission.ts中引入并自定义router.js，代码如下：
import router from './router' import store from './store'
//自定义方法 function myfunc() {}
//添加额外的路由 const nrouter = router nrouter.addRoutes([{ path: '/myroute', component: () => import('@/views/myroute.vue') }])
export default router
（2）在Vue组件中引入更新后的router.js文件，即permission.ts文件。
例如，在App.vue中引入，代码如下：
注意，这里使用了vue-property-decorator库来装饰组件，并使用装饰器@Component来声明组件。这是因为在Vue2中，使用TypeScript需要额外配置Babel或装饰器插件，不添加装饰器会导致出现类似“TypeError: Cannot read property 'options' of undefined”的错误。
参考资料： 1. Vue.js官方文档 https://cn.vuejs.org/v2/guide/typescript.html 2. TypeScript官方文档 https://www.typescriptlang.org/docs/handbook/vue.html 3. Vue CLI官方文档 https://cli.vuejs.org/zh/guide/css.html#typescript 4. vue-property-decorator文档 https://github.com/kaorun343/vue-property-decorator

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

打印控制台有报错了看看报错