1.vue-router的安装

如果你刚开始创建项目时 有勾选路由选项 那么就不需要执行这一步
我们可以通过npm install --save vue-router@4来下载vue-router(vue3对应的vue-router版本为4)

2.创建并配置router/index.js

如果你在项目创建伊始有勾选路由选项 那么这一步也不需要执行
我们手动创建router/index.js文件 由于我们的vue版本号为3 不同于vue2那样创建router对象
我们首先需要从vue-router中导入createRouter(用于创建router对象)以及createWebHistory(用于设置网页的前进后退)
接着以懒加载的方式导入路由组件(在应用时才从服务器加载 这样就避免了第一次加载时需要一次性加载很多内容 由于体积过大导致用户响应速度慢、浪费流量等等弊端)
然后我们创建routes 提前为我们的router对象设置参数(对象中变量参数的增强写法) 其中 我们需要配置的是若干对路由组件和url的映射关系
接着通过createRouter创建router对象 其中传入刚才设置好的routes以及通过createWebHistory去初始化history属性
最后导出router对象 并挂载到Vue实例中