vue-router API(v3.x.x)

1, Vue-router为Vue环境添加两个全局组件:RouterView(函数组件)和RouterLink;

以下把prop 'to'的值定义为rawLocation类型({path: String, query: Object, hash:String, name: String, params: Object }),文档中的location,把normalize过的location称为resolvedLocation(有哪些需要的属性:{path:String, hash: String, query: Object, name: String, params: Object}),把routes中每一个路由配置对象称为rawRoute(文档中的routeConfig),把由addRouteRecord方法创建的路由record称为resolevedRoute({})(文档中的route record),把在router.matcher.match进行一系列封装的路由对象称为finalRoute,根实例$route也是来自finalRoute,文档中的route对象。以此来区分不同阶段的location和route;

a,RouterLink的作用:用于创建导航标签,用来匹配相应的路由配置以让RouterView能渲染相应的组件;默认是a标签,可以通过attr 'tag'改变;可以通过给 'to'提供目标路径(string:path, Object:rawLocation),这样,当点击导航标签时,就可以导航到目标路径(RouterLink组件内部实现了导航的行为router.push(resolevdLocation) or router.replace(resolevdLocation));该组件可以有子节点,一般只要一个子节点,也可以有多个子节点;该组件可以使用一个默认插槽作用域,内部暴露这几个数据:href(URL, 供给a标签的href), navigate(Function是个导航处理器), isActive(string, 一个class),isExactClass(string, 一个class), route(路由对象,当前URL的路由信息),这种利用插槽暴露底层数据的方式在子节点是组件并需要在该组件中处理这些底层数据时就显得比较灵活如<router-link v-slot={href, navigate}> <NavLink :href="href" @click="navigate"></NavLink> </router-link>,这种情况下,1,需要手动将导航逻辑绑定到具体的子节点上(@click="navigate") 2,RouterLink内部会把多个的子节点用span标签包裹并作为导航标签 3,若只有一个子节点,该子节点作为导航标签;

b,RouterLink提供的props: append(Boolean, 用于相对路径,path直接拼接在当前路径后面),exactPath(Boolean,表示是否只根据path(不包括params、hash、query)作为精确匹配的标准,用在exact-active-class的绑定), exact(Boolean, 精确匹配??和exactPath用于active-class的绑定,若exactPath||exact,则classes[activeClass] = classes[exactActiveClass](Boolean),若不是则根据当前的path、query是否包含以及hash是否一样),replace(Boolean, 替换当前URL的信息,而不是新建一个浏览器历史记录),to(String|Object(rawLocation的形式),目标路径;在link的path解析规则跟路由配置中的path解析规则一样),tag(标签,默认是a标签,如果不是a标签,会在子孙节点找到第一个a标签,并把href和响应的事件处理器赋给该a标签,如果a标签target='_blank',则点击忽略router.push or router.replace的执行,会打开一个新的窗口),event(String | Array<String>, 默认是click事件 可以通过该attr决定在触发哪些事件时,调用事件处理器handler),active-class(String,当该导航被包含激活时,使用的class),exact-active-class(String,当该导航被精确激活时,使用的class,这个在匹配到多个路由配置时,很有用,如<roure-link to="/" exact-active-class='color' >click</router-link>,若当前location的path是‘/test’,这样的class ‘color’就不起作用了);

c,RouterLink的prop 'to':若是rawLocation(需要动态绑定prop 'to',如:to='{}'),那它可选属性:path(String,当要使用location的params时&

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值