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