本文介绍了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