vuejs前端开发案例教程06路由管理.pptxVIP

Vue.js前端开发案例教程

项目1Vue.js入门项目2Vue.js开发基础项目3Vue.js指令项目4Vue.js组件全书目录项目5过渡动画项目8综合案例——开发图书销售网站项目7网络请求与状态管理项目6路由管理

路由管理项目六

项目目标素养目标技能目标知识目标熟悉路由的相关知识掌握VueRouter的安装与使用方法掌握定义嵌套路由和实现动态路由匹配的方法掌握命名路由与路由视图的方法熟悉重定向、别名、编程式导航的相关知识能够安装并使用VueRouter能够定义并使用嵌套路由能够定义带有路径参数的路由，并获取参数值能够命名路由和路由视图能够实现路由重定向并为路由添加别名能够以编程式导航的方式实现页面导航提升灵活运用所学知识解决实际问题的能力遵守和维护社会秩序，为社会和谐稳定发展贡献自己的力量

0102项目描述小刘是一名软件开发工程师，主要负责订餐系统项目的前端开发。

02项目描述Vue.js?提供了配套的路由管理器?Vue?Router。因此，小刘决定使用?Vue?Router?切换显示订餐系统不同模块的内容。

在项目的根目录下安装Vue?Router√在项目的程序入口文件中创建并引用路由实例√在项目的根组件中定义导航链接和路由视图查看页面效果，验证切换显示是否实现在同一页面中切换显示订餐系统不同模块内容项目分析

1.在Web开发中，路由分为哪几种？2.Vue.js中的路由属于哪种路由？问题项目准备全班学生以3～5人为一组进行分组，各组选出组长。组长组织组员扫码观看“认识路由”视频，讨论并回答下列问题。认识路由

01认识路由嵌套路由命名路由与路由视图030502VueRouter的安装与使用动态路由匹配重定向与别名0406项目导航

0907编程式导航项目实训项目考核1108项目实施项目总结项目评价1012项目导航

简介认识路由在?Web?开发中，路由用于根据用户在浏览器中访问的?URL?地址（也称为网址）分发相应的处理程序。

后端路由认识路由后端路由的整个过程发生在服务器端。用户在浏览器中访问?URL?地址时浏览器服务器发送请求通过路由寻找?URL?地址对应的处理程序执行相应的业务逻辑发送处理结果特点：访问过程中，每次跳转到不同的URL地址，都会重新访问服务器，浏览器也会刷新页面。

前端路由认识路由前端路由的整个过程发生在浏览器端。发生过程：当用户单击链接或按钮发起请求时，前端路由会拦截这些请求，并通过路由找到对应的组件，然后在页面上动态渲染这些组件。特点：当浏览器中的?URL?地址改变时，不需要向服务器发起加载新页面的请求，而是在当前页面中切换显示的内容。

前端路由认识路由两种常用工作模式：Hash?模式和?HTML5History模式。前端路由定义了路径（path）与组件（component）之间的映射关系。Hash模式前端路由的工作原理“#”表示?Hash?符，“#”后面的值（如“/home”）称为?Hash?值，该值用于进行路由匹配。通过?URL?地址中从“#”开始的部分实现不同组件之间的切换。

VueRouter的安装VueRouter的安装与使用在?Vue.js?项目中，可以使用包管理工具在项目的根目录下安装VueRouter，命令如下。//使用npminstall命令安装VueRouternpminstallvue-router@4.2.5//使用yarnadd命令安装VueRouteryarnaddvue-router@4.2.5

VueRouter的使用VueRouter的安装与使用使用VueRouter的基本步骤如下：1.创建路由组件根据项目的需求，创建页面各个模块的组件。2.创建并引用路由实例①在Vue.js项目的程序入口文件中导入VueRouter的相关函数，代码如下。import{createRouter,createWebHashHistory}fromvue-router‘用于创建路由实例用于指定路由的工作模式为Hash模式

VueRouter的使用VueRouter的安装与使用使用VueRouter的基本步骤如下：2.创建并引用路由实例②使用import语句导入需要的组件并定义路由，语法格式如下。import组件名from组件的路径const路由数组名=[{path:路径,component:组件名},…]数组中的每个对象都代表一个路由用于定义路由的路径用于定义路由对应的组件

高手点拨运行项目后，系统会一次性加载使用?import?语句导入的所有组件。当组件数量很多时，使用?import?语句直接导入组件会影响页面的加载速度。此时，可以使用?import()方法动态导