《Vue应用开发》课件——5.2.2VueRouter的基本使用.pptxVIP

先定一个小目标！掌握VueRouter的基本使用方法，能够在项目中配置VueRouter5.2.2VueRouter的基本使用

5.2.2VueRouter的基本使用路由的基本使用步骤分为以下4步。定义路由组件创建路由模块导入并挂载路由模块134定义路由链接和路由视图2

5.2.2VueRouter的基本使用1.定义路由组件在src\components目录下创建Home.vue文件和About.vue文件。

5.2.2VueRouter的基本使用2.定义路由链接和路由视图在App.vue中使用router-view标签定义路由视图，该标签会被渲染成当前路由对应的组件。通过router-link标签定义路由链接方便在不同组件之间切换。

5.2.2VueRouter的基本使用接上页代码

5.2.2VueRouter的基本使用3.创建路由模块①在src目录下创建router.js文件作为路由模块，并在该文件中导入路由相关函数。②在router.js文件中导入需要被路由控制的Home组件和About组件。

5.2.2VueRouter的基本使用③在router.js文件中创建路由实例对象。④在router.js文件中导出路由实例对象。注意：步骤②和③的组件加载方式是一次加载所有组件，除了这种方式外，还可以通过懒加载的方式动态加载组件。（下