Vue.js前端开发框架应用（微课版） 课件 第七章 Vue.js路由.pptx

Vue.js前端开发框架应用Vue.js路由路由基础目录构建方式使用路由命名路由嵌套路由命名视图带参数路由匹配编程式导航路由别名与重定向Vue.js路由路由基础Vue.js框架提供了名为VueRouter的官方客户端路由，其与Vue.js核心深度集成，提供了完备的客户端路由功能，而且让客户端路由在前端项目开发中的应用更加容易。在非构建方式开发的页面中，VueRouter可以通过JavaScript文件方式引入页面，引入后通过定义路由、创建路由实例和将路由实例应用到当前Vue.js的根实例三个主要步骤即可实现客户端路由功能。要注意的是VueRouter实现的客户端路由是基于Vue.js组件的，也就是说只有在组件化开发的项目中才能使用VueRouter实现客户端路由。【案例7?1】非构建方式使用路由。路由基础目录构建方式使用路由命名路由嵌套路由命名视图带参数路由匹配编程式导航路由别名与重定向Vue.js路由构建方式使用路由使用构建方式开发Vue.js项目并使用路由，首先需要将VueRouter引入到项目中。VueRouter的引入可以在创建初始项目时添加也可以通过npm安装到现有的项目中。要创建Vue.js初始项目并引入VueRouter，可以在本书第1章介绍的创建初始项目的方法上修改一项设置即可。具体步骤是，首先通过系统命令行终端进入目标文件夹，执行下面的命令创建项目，然后创建项目时对应添加VueRouter支持的选项选择“Yes”。npminitvue@latest以在D盘根目录创建项目为例，演示整个创建过程Vue.js路由构建方式使用路由对于现有的Vue.js构建式项目，如需引入VueRouter的支持，需要通过npm来安装引入。具体步骤是，通过系统命令行终端进入待引入VueRouter的项目的文件夹，执行下面的命令引入VueRouter即可。注意引入后，项目运行前需重新执行一遍npminstall命令。npminstallvue-router@4引入VueRouter支持npminstall安装依赖项以在D盘根目录创建项目为例，演示整个创建过程，先创建一个不引入VueRouter支持的项目，然后再引入VueRouterVue.js组件构建方式使用路由【案例7-2】构建方式路由应用以本书第六章介绍的Vue.js构建式开发初始项目为项目模板。路由基础目录构建方式使用路由命名路由嵌套路由命名视图带参数路由匹配编程式导航路由别名与重定向Vue.js路由路由参数在定义路由信息时，路径连接中可以放入路由参数，路由参数用冒号表示。 constroutes=[{path:/setting/:id,component:Setting}, ]当上述路由被匹配时，路由参数id的值可以在Setting组件中通过this.$route.params获取到。在一条路由路径中是可以包含多个参数的，比如下面这种情况： constroutes=[{path:/:domain/setting/:name/:id,component:Setting}, ]路由路径中包含domain和id两个参数，通过链接路径“/public/setting/6”访问网站时，Setting组件中通过this.$route.params.domain可获取到参数值为“public”，this.$route.params.id可获取到参数值为“6”。Vue.js路由路由参数【案例7-3】路由参数应用。Vue.js路由路由参数路由参数在和链接路径匹配时，除了前面介绍的直接匹配方式，还支持正则表达式、可重复参数和可选参数等多种匹配模式。带正则表达式的路由参数用法如下：constroutes=[//:userId(\\d+)仅匹配数字{path:/:userId(\\d+)},//:userName匹配其他任何内容{path:/:userName},]通过在参数后面使用小括号加入正则表达式可定义路由参数的匹配内容。Vue.js路由路由参数当路由参数需要匹配多项内容时，可选择使用重复参数，如下面这种路由情况：constroutes=[{path:/:roleone/:roletwo/:rolethree}]该路由路径带有三个参数，可使用可重复路由参数的定义方式简化路由规则，做法如下：constroutes=[{path:/:roles+}]上述路由参数定义方式在参数后加上符号“+”表示可匹配一个或多个参数，比如匹配链接“/role1”、“/role1/role2”或“/role1/role2/role3”