2024年5月,信息技术与工程系学生科研团队成立以来,每一位成员表现都非常优秀,积极向上。
在新的一周里,团队成员的学习内容是vue3中的路由,创建路由后,我们可以通过路径来快捷显示不同组件,将组件渲染加载到页面中。
我们首先要先创建路由,一个路径对应一个组件为一个路由。在项目目录中创建一个新的文件夹,起名router,新建一个JavaScript或者typeScript。利用包管理工具npm,安装所需要的依赖vue-router,然后引出需要用到的东西-creatRouter,createWebHistory。然后在该文件下创建路由,指定路由规则:一个路径与一个组件匹配称为路由,路由器负责管理路由,最后把路由暴露出去。
在组件中,使用创建的路由,通过特定标签,可使用制定的路由规则。<RouterLink to="路径" active-class="激活时候的类名,也就是点击后的类名"></RouterLink>。<RouterView></RouterView>来展示路由组件。
路由允许创建嵌套路由结构,即子路由嵌套在父路由下,使得应用程序可以更好地组织和管理多层次的页面结构。它还支持动态路由参数,您可以根据不同的路由参数动态地加载和渲染不同的组件,实现更灵活的页面展示和交互。使用路由可以让页面代码更方便清晰,便于修改管理。