vue 路由不生效_如何在 Vue 3 中使用路由管理器 Vue Router？

由于 Vue 3 在架构层面上的变化，使得我们之前在 Vue 2.x 中使用的路由管理器 Vue Router 的当前版本已不能继续在 Vue 3 的项目中使用。不过，Vue Router 已经做了跟进支持，推出了 Vue Router 4.0 版本以支持在 Vue 3 项目中使用。

Vue Router 4.0 在用法上面还是跟之前的版本存在一些小小差别的，所以我们今天来看一下如何正确的使用它。

这次要完成的一个小例子是：在页面上放置3个链接，链接下方放置一个内容切换区域；点击不同的链接可以实现内容区域的内容切换。

安装 Vue Router 4.0

使用它的第一步当然就是先要安装它咯！来看下如何通过 npm 或 yarn 安装 Vue Router 4.0 的版本：

# npmnpm i vue-router@next --save# yarnyarn add vue-router@next

在 Vue 3 的项目根目录中成功执行以上的命令行后，就可以为项目安装上 4.0 版本的 Vue Router 了！安装完成后，打开 package.json 去确认一下：

{
      // 省略 ...    "dependencies": {
        "core-js": "^3.6.5",    "vue": "^3.0.0",    "vue-router": "^4.0.0-rc.5"