持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第16天，点击查看活动详情
上一篇文章中我们实现了CommonHeader.vue组件中的一些功能，接下来我们将实现左侧菜单栏的路由跳转的功能。
- 首先，我们需要通过npm或者cnpm等方式在终端窗口下载vue-router,下完完成之后可以在package.json文件里面看到vue-router的版本号，我的是4.1.5版本
- 然后我们在src目录下面创建一个router的文件夹，里面创建一个index.js的文件，然后在main.js文件里面import引入router并且use（router）使用一下。
- 然后我们需要在index.js文件里面配置我们的页面的路由，通过const创建一个routers,如果有子路由则需要像下图所示一样配置：
- 如果没有子路由则就像下图所示配置：
在这个文件的头部我们还需要import引入一下vue-router,代码如下所示：
import { createRouter, createWebHistory } from "vue-router";
这里我们使用的是history路由，配置完成之后我们还需要配置如下代码：
const router = createRouter({
history: createWebHistory(),
routes,
});
最后我们需要通过export将router暴露导出
export default router;
完成之后我们的router就配置完成了。
- 然后我们需要在Aside.vue文件里面引入使用该路由配置
import { useRouter } from "vue-router";
然后创建有子路由的以及没有子路由的，通过filter过滤来实现，代码如下所示：
然后通过v-for渲染list，将动态绑定的index绑定到每一项的path路径上，再绑定一个点击事件就可以点击跳转到详情页面了。
