简单描述一下router-link

简单描述一下router-link
router-link多用语路由之间的跳转,类似于属性但是着实比属性好用了不少
它包含了这几个属性:
1.to
e.g.
Home
可以使得你点击这个字符串Home的时候跳转到我们想要的home路径,是在不需要传参数到目标路径时最常用的跳转方法
2.replace
我们的路由挑战实际上使用的是history,所以它是会留下history记录的
那么如果我们不想留下这个纪录怎么办呢?我们可以使用router.replace()来代替router.push()
首先名切它是什么:active-class是vue-link里面的一个属性,它的作用就是切换选中的样式
e.g.

3.append
这个属性默认值是为false
简单来讲这个属性的意义就是如果你想从a页面跳转到b页面,那么你不使用这个属性它的直接跳转路径就是/b但是如果你使用了它就会变成/a/b,看自己是否需要
4.tag
顾名思义就是router-link被渲染的标签,默认为
但如果你自己想改的话就可以直接用tag=“你想要的”来改变他的标签渲染,当然就算你改变了他还是会监听点击触发导航的
5.active-class
一句话总结的话它的用法就是用来切换选中样式
当router-link被点击时,被点击的标签将会应用active-class绑定的这个样式
分为两种配置方法

第一种:
直接在路由js文件中写linkActiveClass来配置他
export default new Router({
    linkActiveClass: ‘active’,
})
第二种:直接在router-link中写入这个属性

6.exact
这是一个很好用的帮助active-class的一个属性
active-class是激活绑定css属性,但是默认情况下比如从a路由跳转到b路由,这两种路径都会切换成active-class的样式,怎么样才可以只让b拥有active-class的样式呢?在标签内绑定exact就好了,等同于exact-active-class

你可能感兴趣的:(router,前端,vue.js)