vue-router 报错：

Vue-router 报错：TypeError: Cannot read property 'matched' of undefined

简介

使用 vue-router 时，您可能会遇到以下错误：

TypeError: Cannot read property 'matched' of undefined

此错误表明 vue-router 无法找到与当前导航匹配的路由记录。这通常是由以下原因引起的：

原因

• 路由定义不匹配： 确保 <router-link> 中使用的路径与路由定义中指定的路径相匹配。
• 路由组件未注册： 检查路由组件是否已在 routes.js 文件中正确注册。
• 导航守卫阻止导航： 检查是否有任何导航守卫阻止了导航。
• 缺少 router-view 组件： <router-view> 组件应包含在 App.vue 中，以呈现路由视图。
• Vue 和 Vue Router 导入错误： 检查 main.js 文件以确保正确导入了 Vue 和 Vue Router。

解决方法

1. 检查路由定义

// routes.js
export default new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/query',
      component: Query
    }
  ]
})

<!-- App.vue -->
<router-link to="/">Home</router-link>
<router-link to="/query">Query</router-link>

2. 注册路由组件

// App.vue
import Home from './Components/Home.vue'
import Query from './Components/Query.vue'

3. 检查导航守卫

// App.vue
import VueRouter from 'vue-router'

// 在 Vue 实例化之前注册 Vue Router
Vue.use(VueRouter)

// 创建路由实例并传递路由配置
new Vue({
  router: new VueRouter({
    routes: routes,
    // 添加导航守卫来记录匹配的路由
    beforeEach: (to, from, next) => {
      console.log(to.matched)
      next()
    }
  })
})

4. 提供明确的视图

<!-- App.vue -->
<router-view></router-view>

5. 确保 Vue 和 Vue Router 已正确导入

// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'

// 在 Vue 实例化之前注册 Vue Router
Vue.use(VueRouter)

结论

解决 "TypeError: Cannot read property 'matched' of undefined" 错误涉及检查路由定义、注册路由组件、检查导航守卫、提供明确的视图以及确保正确导入 Vue 和 Vue Router。通过遵循这些步骤，您可以解决此问题并确保您的 Vue.js 应用程序正常运行。

常见问题解答

1. 为什么我看到 "matched" 数组为空？
   • 如果当前路由不匹配任何定义的路由，matched 数组将为空。
2. 如何调试导航守卫？
   • 在导航守卫中添加 console.log 语句以记录匹配的路由和导航状态。
3. router-view 组件应该放在哪里？
   • <router-view> 组件应包含在根 Vue 实例中，通常在 App.vue 文件中。
4. 为什么我看到 "Cannot read property 'push' of undefined" 错误？
   • 此错误表示 this.$router 未定义。确保您已正确在组件中安装 Vue Router 插件。
5. 我是否可以在导航守卫中修改导航路径？
   • 是的，您可以使用 next({ path: '/new-path' }) 修改导航路径。