vue-router基础入门

2018年3月11日22:23:55 发表评论 35

vue-router是vue官方提供的一个路由组件,可以非常方便的给我们的项目或者说spa单页面应用设置路由,下文将参考vue-router官方文档带大家一起领略vue-router的风采,这里就不配置vue项目运行环境了,直接引入vue和vue-router文件来进行教学。

vue-router基础入门

vue-router例子

HTML

JS

注:注册路由之后,我们就可以在任何的组件里面,使用this.$router来访问它。

vue-router基础知识

router-link

router-link其实是一个组件,它会渲染一个带链接的a标签,通过to属性就是设置a标签的href地址。

注:选中的router-link会自动加一个.router-link-activeclass。

router-link属性配置

  1. to:是必须要设置的属性,表示a标签的href地址,可以是一个字符串或者目标位置对象。
  2. replace:一个布尔类型,默认是false。如果设置为true,点击它将不会留下历史记录,你在浏览器点返回上一页是没有用的。
  3. tag:router-link默认是渲染a标签的,如果设置tag,就可以将它渲染成任意标签。
  4. active-class:链接被选中默认是添加router-link0-active的class的,如果设置这个属性,就可以在选中时加上任意的class值。

router-view

这个组件很关键,是用来渲染匹配到的路由的。

可以设置transition过渡动画和keep-alive缓存数据,具体的用法可以看vue官方教程

router.replace

路由重定向:

可以给重定向的目标设置一个名称

router.push

push方法和<router-link :to="...">是一样效果的。全局注册的路由,就要使用this.$router

router.go

go的方法可以控制浏览器history记录的前进和后退

猿梦

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: