Vue-Router常用、好用的知识点整理

本文详细探讨了Vue-Router在实际应用中的关键知识点,包括history模式的配置、路由激活状态的定制、router-link的prop属性用法、页面滚动行为的控制以及如何利用this.$router和this.$route获取信息。通过这些技巧,可以更高效地管理和控制Vue应用的路由。
摘要由CSDN通过智能技术生成

本文介绍了Vue配合使用Vue-router时常用的方法以及知识点 ,主要为history模式、路由激活状态(路由激活时对应点击态等触发态的配置)、router-link的prop属性、根据路由滚动到页面指定位置

1、当你在 HTML5 history 模式下使用 base 选项之后,所有的 to 属性都不需要写 (基路径) 了。

  eg:如下点击后访问的链接为  /bar/foo

  notice:base的使用必须搭配history模式,

new Vuerouter({
    mode: 'history',
    base: 'bar'
})

<router-link to="foo"></router-link>

2、有时候我们要让激活 class 应用在外层元素,而不是 <a> 标签本身,那么可以用 <router-link> 渲染外层元素,包裹着内层的原生 <a> 标签。

  eg:如下router-link执行后会变成li标签,并将to属性的值赋值给内层a标签的href属性,最终为<li><a href="/fool"></a></li>

<router-link tag="li" to="/foo">
  <a>/foo</a>
</router-lin
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值