logo

该视频仅会员有权观看

立即开通课程「Vue.js前端应用开发实践」权限。

¥
199
/ 年

应用的路由:Vue Router

  • 在vivo U上创建一个名为app router.ts的路由器文件。
  • 进行依赖安装,添加vue-routerpackage.json文件,使用版本4.0.0
  • 使用npm install命令安装项目依赖。
  • src/app目录下配置路由器,使用vue-router的createRoutercreateWebHistory
  • 创建路由数组routes并暴露出路由器。
  • 在vue应用入口文件main.ts中导入自定义路由器appRouter
  • 使用vueuse函数应用路由器。
  • 定义路由路径和组件映射,在src/app目录创建appRoutes.ts文件。
  • 创建和路由对应的组件,如app homepost index
  • 每个组件路由使用name, pathcomponent字段配置。
  • 在路由文件中,将路由路径和组件导入并暴露。
  • 使用<router-view>组件在应用中展示活动路由对应的组件。
  • 使用<router-link>组件创建指向不同路由路径的链接。
  • 在浏览器可预览访问不同路由地址对应的组件内容。