《7-4 7.11Vue-router的APIppt课件 Vue.js基础与应用开发实战（微课版）.pptx》由会员分享，可在线阅读，更多相关《7-4 7.11Vue-router的APIppt课件 Vue.js基础与应用开发实战（微课版）.pptx（14页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、7-4 7.11 Vue-router的API教学课件 Vue.js基础与应用开发实战（微课版）7.11 Vue-router的API7.11.1 router-link组件支持用户在具有路由功能的应用中实现导航，通过to属性指定目标地址，默认渲染成带有正确链接的标签，可以通过配置tag属性生成别的标签。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的CSS类名。7.11.1 router-link比 会好一些，无论是history模式还是hash模式，它的表现行为一致，所以，当切换路由模式，或者在IE9降级使用hash模式，无须作任何变动；在HTML5 history模式下，rou
2、ter-link会拦截单击事件，让浏览器不再重新加载页面；在HTML5 history模式下使用base选项之后，所有的to属性都不需要写基路径了。（1）to(required)表示目标路由的链接。当被单击后，内部会立刻把to的值传到router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。例如：Home Home（2）replace设置replace属性的话，当单击时，会调用router.replace()而不是router.push()，于是导航后不会留下history记录，例如：（3）append设置append属性后，则在当前（相对）路径前添加基路径。例如，从/a
3、导航到一个相对路径b，如果没有配置append，则路径为/b，如果设置了append，则为/a/b。例如：（4）tagtag的默认值为a。有时想要渲染成某种标签，例如，于是使用tag prop类指定何种标签，同样它还是会监听单击，触发导航。例如：login login（5）active-class设置链接激活时使用的CSS类名，默认值可以通过路由的构造选项linkActiveClass来全局配置。（6）exact是否激活默认类名的依据是inclusive match（全包含匹配）。如果当前的路径是/a开头的，那么也会被设置CSS 类名。按照这个规则，将会点亮各个路由。想要链接使用exact匹配
4、模式，则使用exact属性。例如：（7）eventsevents的默认值为click。声明可以用来触发导航的事件，可以是一个字符串或是一个包含字符串的数组。7.11.2 router-view组件是一个实用组件，渲染路径匹配到的视图组件。渲染的组件还可以内嵌自己的，根据嵌套路径，渲染嵌套组件。组件的name属性默认值为：default。如果设置了名称，则会渲染对应的路由配置中components下的相应组件。7.11.2 router-view因 为 也 是 个 组 件，所 以 可 以 配 合和 使用。如果两个结合一起用，要确保在内层使用，例如：快乐学习！高效学习！快乐学习！高效学习！祝学习进步！祝学习进步！