Vue.js 超详细入门与项目实战（微课视频版）课件 第13章 项目路由配置_第1页
Vue.js 超详细入门与项目实战（微课视频版）课件 第13章 项目路由配置_第2页
Vue.js 超详细入门与项目实战（微课视频版）课件 第13章 项目路由配置_第3页
Vue.js 超详细入门与项目实战（微课视频版）课件 第13章 项目路由配置_第4页
Vue.js 超详细入门与项目实战（微课视频版）课件 第13章 项目路由配置_第5页
已阅读5页，还剩6页未读， 继续免费阅读

付费下载

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第13章项目路由配置课件V1.0

教学内容第一节

创建路由文件第二节配置路由对象知识目标教学目标理解和掌握路由的安装和配置方法掌握路由中

routes

对象配置和传参的方法理解和掌握路由中错误地址的处理方法知识点预览#节知识点难点重点应用13C13-01创建路由文件1、安装路由模块

2、构建路由结构3、挂载路由文件C13-02配置路由对象1、按需加载组件2、路由传参3、配置错误地址

路由是Vue框架的一个重要模块，它的安装十分简单，只要在项目根目录下，通过指令方式，安装指定版本的路由模块即可，通常情况下，Vue3对应的路由版本号是4以上的版本，即Vue-router4+版本，本项目的路由版本是Vue-router4.2.4。安装路由模块

安装路由模块只是使用项目具有路由功能的第一步，接下来，需要通过这个路由模块，创建一个实例化的路由对象，并在创建对象时，配置项目中组件与地址的对应关系，并导出这个配置完成的路由对象，用于Vue实例的挂载。

因为路由是项目中的一个非常独立的模块，因此，在实例化路由对象时，通过会在项目的src目录下，创建一个名称为router的单独文件夹，并在文件夹中新建一个名称为index的.js文件，用于保存和导出创建完成的路由对象。构建路由结构

当路由对象创建完成，并导出后，接下来需要挂载到Vue实例化对象中，才能在整个项目中生效，挂载的方法是，打开src目录下的main.js文件，加入代码。1挂载路由文件构建一个routes数组对象必须包含两个属性，一个是path，表示路由跳转的地址，另外一个是component表示跳转地址对应的组件，除这两个必需属性外，还可以添加name和meta属性，前者表示每个路由的名称，后者表示每个路由的元信息。保存路由元信息的mate属性无论是否定义，都可以通过this.$route.meta方式获取到该路由的元信息，如果未定义，则返回一个空对象。元信息中可以验证用户是否登录、设置标题和缓存，同时，还可以设置一个值，由该值决定是否显示或隐藏某个组件或元素。本项目中，大部分的routes数组对象都是一个路径对应一个款组件的形式。按需加载组件在开发web项目时，需要考虑用户输入错误地址时的响应页面，因此，首先在src文件夹下，添加一个error文件夹，并在该文件夹中创建一个名为ErrPage的.vue文件，用于显示错误地址响应的页面信息。然后，在路由配置文件src/router/index.js中，再添加一个路由对象，在对象中，通过正则表达式，捕捉到错误的路径信息，再根据这样的路径信息，按需加载名称为ErrPage

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论