Vuejs 前端开发技术与实践第PPT课件（共12章）第8章Vue路由.pptxVIP

第8章 Vue路由单页面模式在客户端实现URL变化，显示不同内容的页面，将单页应用分割为各自功能合理的组件，路由用于设定访问路径，并将路径和组件映射起来，路由是连接单页应用中各组件之间的链条。8.1 vue-router安装和基本使用8.1.1 下载安装vue-router（1）下载： vue-router.js登录下载地址/zh/installation.html下载。 （2）引入在HTML页面先引入 Vue，接着引入Vue-Routerscript src=js/vue.js/scriptscript src=js/vue-router.js/script8.1.2 vue-router基本用法（1）引入vue 和vue-router。（2）创建组件或已有创建好的组件。（3）配置路由，提供一个路由配置表，不同路径对应不同组件的配置。（4）创建路由实例new VueRouter()，传入路由配置表。（5）把路由实例配置到Vue实例对象上。（6）提供一个路由出口（router-view/router-view），用来挂载路由匹配到的组件，组件将渲染在这里。8.2设置路由被激活的链接样式当链接被激活时，vue-route会自动为router-link渲染时所生成的元素赋予一个类(class)，在默认情况下，这个类是router-link-active。8.3 设置路由切换过渡动画使用过渡组件transition，包裹路由出口router-view/router-view8.4嵌套路由一个被渲染的组件同样可以包含自己嵌套的?router-view，需要在配置路由表时，配置children选项，children选项可以给某个路由设置嵌套路由。8.5命名路由在配置路由表时，name配置选项可以给某个路由设置名称。8.6 别名在配置路由表时，alias配置选项可以给某个路由设置别名。8.7 重定向“重定向”的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后去匹配路由/b。在配置路由表时，redirect配置选项设置重定向。8.8命名视图如创建一个布局，需要同时 （同级） 展示多个视图，而不是嵌套展示，在界面中就需要拥有多个单独命名的视图组件router-view，分别来渲染对应的组件。通过name属性给视图组件命名，如果 router-view 没有设置名字，那么默认为 default。8.9 路由传递参数8.9.1 路由对象通过路由传递的参数是存放在当前路由对象中的。 把路由实例配置到Vue实例对象上面，就可以在任何组件内通过 this.$router 访问路由器对象，也可以通过 this.$route 访问当前路由对象，当前路由对象存放着当前激活的路由状态信息。8.9.2 路由传递参数先在路由配置中配置形参，配置在路径后使用冒号 “:” 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params。8.9.3 查询字符串传递参数如果在路由中，使用查询字符串，给路由传递参数，当匹配到一个路由时，查询参数的键值对会被设置到 this.$route. query。8.10 编程式的导航?router实例方法的导航方法有push、 replace、 go。在 Vue 实例内部，可以通过$router 访问路由实例，因此可以调用 this.$router调用这些方法。学习vue-router的基本使用，了解路由中3个基本的概念：route、routes、router。route ：表示它是一条路由，单数形式routes：表示它是一组路由，把route的每一条路由组合起来，形成一个数组router：表示它是一个机制，充当管理路由的管理者角色学习vue-router的基本使用前，首先了解路由中3个基本的概念：route、routes、router。route ：表示它是一条路由，单数形式routes：表示它是一组路由，把route的每一条路由组合起来，形成一个数组router：表示它是一个机制，充当管理路由的管理者角色