vue3踩坑分享（ 3 ）解决 ‘VueRouter‘、vue-router未找到 ， this.$router未定义

 '尝试使用vue3做一个简单demo，需要使用vue-router插件，然后就遇到了VueRouter'、vue-router未找到 ，this.$router未定义等等问题。在网上找了许多方法都无效，搞的我是烦死了。

经过尝试，应该是版本问题。

然后去看vue-router3.x版本的文档 

以下就是一部分文档，比较多，跟着文档我使用了命令 vue add router 之后我的问题终于解决了。

在执行命令 vue add router后 ‘VueRouter‘、vue-router未找到 ， this.$router未定义的问题没有了

执行vue add router后会创建一个新的路由文件把原来的路由文件覆盖，如果文件很重要建议先备份，还有会改变vue-router的版本，我的从4.0.16到了4.0.3

添加路由#

动态路由主要通过两个函数实现。router.addRoute() 和 router.removeRoute()。它们只注册一个新的路由，也就是说，如果新增加的路由与当前位置相匹配，就需要你用 router.push() 或 router.replace() 来手动导航，才能显示该新路由。我们来看一个例子：

想象一下，只有一个路由的以下路由：

const router = createRouter({
  history: createWebHistory(),
  routes: [{ path: '/:articleName', component: Article }],
})

进入任何页面，/about，/store，或者 /3-tricks-to-improve-your-routing-code 最终都会呈现 Article 组件。如果我们在 /about 上添加一个新的路由：

router.addRoute({ path: '/about', component: About })

页面仍然会显示 Article 组件，我们需要手动调用 router.replace() 来改变当前的位置，并覆盖我们原来的位置（而不是添加一个新的路由，最后在我们的历史中两次出现在同一个位置）：

router.addRoute({ path: '/about', component: About })
// 我们也可以使用 this.$route 或 route = useRoute() （在 setup 中）
router.replace(router.currentRoute.value.fullPath)

记住，如果你需要等待新的路由显示，可以使用 await router.replace()。

在导航守卫中添加路由#

如果你决定在导航守卫内部添加或删除路由，你不应该调用 router.replace()，而是通过返回新的位置来触发重定向：

router.beforeEach(to => {
  if (!hasNecessaryRoute(to)) {
    router.addRoute(generateRoute(to))
    // 触发重定向
    return to.fullPath
  }
})

上面的例子有两个假设：第一，新添加的路由记录将与 to 位置相匹配，实际上导致与我们试图访问的位置不同。第二，hasNecessaryRoute() 在添加新的路由后返回 false，以避免无限重定向。

因为是在重定向中，所以我们是在替换将要跳转的导航，实际上行为就像之前的例子一样。而在实际场景中，添加路由的行为更有可能发生在导航守卫之外，例如，当一个视图组件挂载时，它会注册新的路由。

删除路由#

有几个不同的方法来删除现有的路由：

• 通过添加一个名称冲突的路由。如果添加与现有途径名称相同的途径，会先删除路由，再添加路由：

  router.addRoute({ path: '/about', name: 'about', component: About })
  // 这将会删除之前已经添加的路由，因为他们具有相同的名字且名字必须是唯一的
  router.addRoute({ path: '/other', name: 'about', component: Other })
  

• 通过调用 router.addRoute() 返回的回调：

  const removeRoute = router.addRoute(routeRecord)
  removeRoute() // 删除路由如果存在的话
  

  当路由没有名称时，这很有用。
• 通过使用 router.removeRoute() 按名称删除路由：

  router.addRoute({ path: '/about', name: 'about', component: About })
  // 删除路由
  router.removeRoute('about')
  

  需要注意的是，如果你想使用这个功能，但又想避免名字的冲突，可以在路由中使用 Symbol 作为名字。

当路由被删除时，所有的别名和子路由也会被同时删除

添加嵌套路由#

要将嵌套路由添加到现有的路由中，可以将路由的 name 作为第一个参数传递给 router.addRoute()，这将有效地添加路由，就像通过 children 添加的一样：

router.addRoute({ name: 'admin', path: '/admin', component: Admin })
router.addRoute('admin', { path: 'settings', component: AdminSettings })

这等效于：

router.addRoute({
  name: 'admin',
  path: '/admin',
  component: Admin,
  children: [{ path: 'settings', component: AdminSettings }],
})