Vue.js 超详细入门与项目实战（微课视频版）课件 第08章 路由

第8章路由课件V1.0

教学内容第一节

路由介绍第二节路由传参第三节

路由其他配置知识目标教学目标理解和掌握路由基本配置的方法和过程掌握路由间传参和接收参数的方法理解路由重定向和守卫配置方法和过程知识点预览#节知识点难点重点应用8C08-01路由介绍1、基本配置

2、路由树配置C08-02路由传参1、路由跳转2、带参数跳转3、接收跳转参数C08-03路由其他配置1、重定向配置2、404配置3、路由守卫配置

在Vue3中，配置路由之前需要先安装路由，并且安装的版本必须是4.0以上，因此，在vue-cli中，通过下列命令来安装路由模块，-g表示全局安装，@可以指定安装模块的版本号。npminstall-gvue-router@4.1.6

路由模块安装成功后，就可以配置路由，方法是先在项目的src文件夹下添加一个名称为router的新文件夹，并在该文件夹中添加一个名称为index的js文件，作为路由模块的配置文件。基本配置

一个配置路由的文件由导入路由模块、创建路由对象和导出路由对象三个部分组成，在创建路由对象时，需要构建路由数组，路由数组中包括一级、二级和多级路由结构，因此，这种结构的路由配置，又称为路由树配置。一级路由结构是指在路由地址中，只有一个路径，则称为一级路由。多级路由结构

在Vue路由数组中，允许配置多级的路由对象结构，可以是二级、三级或者更多级别，最大级别原则上没有限制，但通常最大的是三或四级，这种路由结构，称之为多级路由。路由树配置多级路由配置效果路由树配置

除了通过a标签进行路由跳转之外，还可以使用router-link标签实现跳转功能，它是一个全局的组件，可以直接在template中使用，无需导入，编译后自动转成一个a标签，但它的功能比a标签更加灵活，直接在当前页中进行路由跳转，不会刷新页面。还可以在代码中，通过路由对象router进行页面之前的相互跳转。注意：从路由模块中导入的必须是useRouter方法，只有在调用这个方法之后的router对象中才可以使用push方法，push方法的本质是向当前的路由栈中再添加一个新的路由记录，并根据这个记录进行路由切换，从而实现页面跳转的功能。路由跳转

在路由跳转时，还可以携带参数进入目标页，跳转标签和方式不同，携带参数的格式也不一样，如果是一个a标签携带参数跳转，如下代码所示：

<ahref="/list?gradeId=1001">一年级</a>还可以在路径中使用配置项指定的格式携带参数，如下代码所示：<ahref="/list/1001">一年级</a>还可以使用router-link和其他标签携带参数跳转。

带参数跳转

路由携带参数跳转到目标页面后，页面组件可以接收到携带传入的参数，接收的方式与携带的方式相关，如果是采用查询字符串方式携带，那么可以通过路由中的query对象获取到参数，如果是其他方式，通常都是通过路由中的params对象获取。接收跳转参数效果接收跳转参数

为了避免已下线的页面和错误的地址，直接访问会出现404错误异常现象，通常会通过重定向配置，指向一个新的页面地址，或者跳转到首页，代码如下所示。{path:'/error',redirect:'/list',}

重定向配置通常只需要配置两个属性就可以，一个是path，表示原有访问的路径，另一个是redirect，表示重新指定的路径，这个属性接收三种类型的值，第一种是字符串型，第二种是router对象型，第三种是函数型。

重定向配置

并不是所有的错误访问地址都需要重定向，有时仅是针对原有的，已下架的页面地址做重定向，因为这些地址有可能是从收藏夹中直接访问的。针对那些没有重定向的地址，可以添加一个公用的404页面，如果访问出错，就直接跳转到该页面，代码如下所示。{path:'/:pathMatch(.*)*',name:'404',component:()=>import('../views/404.vue'),}

404配置

虽然可以通过路由重定向，根据用户角色进入不同的页面，但有的页面在进入时，需要再次检测用户的登录状态，如果没有登录，则返回登录页重新再登录，如果已经登录，则可以进入下一页，这种状态的检测需要配置路由守卫。

路由守卫的配置依赖于路由对象router在生命周期中的钩子函数，router在整个执行过程中有三个钩子函数，它们的功能和执行时机如下表8-1所示：路由守卫配置

router钩子函数路由守卫配置函数名称功能说