首页 > 其他 > 详细

vue-router的使用

时间:2019-02-26 10:52:26      阅读:147      评论:0      收藏:0      [点我收藏+]

重定向与别名

如果用户在地址栏访问的地址不在路由配置里面:

技术分享图片

 

别名:当地址栏访问的是别名的时候,也会匹配到改路由,但是路由不会是激活状态

技术分享图片

 

router-link配置项

路由激活状态设置样式:默认的类名是router-link-active

1:在路由配置里有个属性linkActiveClass,属性值为你想要激活的类名,然后用这个类名来设置样式

技术分享图片

 

2:在router-link里配置,有个属性active-class,属性值为你想要的类名

技术分享图片

 

嵌套路由的使用

 使用了 ‘/‘ 跟路径来匹配一个路由页面的话,在点击别的路由,这个 ‘/‘ 路由还是会在激活状态,这样就会有俩个激活状态,这是全包含匹配,需要在router-link上添加一个exact属性

技术分享图片

 

命名视图

在嵌套路由过多,名字繁琐的时候,可以使用name来方便访问路由

技术分享图片

在一个页面有俩个视图router-view的时候,使用命名视图来区分

技术分享图片

默认的是class=“center”视图

技术分享图片

这样默认的default会渲染document路由,slider渲染slider路由

 

滚动行为

浏览器默认刷新的时候滚动条会在以前的位置,但是前进后退的时候在进入页面滚动条就会回到开始位置,可以使用滚动行为让滚动条还在以前的位置

技术分享图片

也可以使用hash来定位位置

 

动态路径

匹配到所有的路径,全部映射到同一组件

技术分享图片

可以使用this.$route.params来访问tip和userId

 

query字符串传参

技术分享图片

 

编程式导航

this.router.back();  //后退一步

this.router.forward(); //前进一步

go(); //指定前进或者后退的步数,负数是后退,正数是前进,如果数字不在范围内是没有反应的

push(); //导航到不同的url,向history栈中添加一个新纪录, router-link怎么写的这方法里也可以怎么写

replace(); //和push一样,但是他是替换history栈中的当前记录

 

导航钩子函数

导航发生变化时,导航钩子主要用来拦截导航,让他完成跳转或者取消

执行钩子函数的位置有:

1.router全局

2.单个路由

3.组件中

 

在router全局中有俩函数:

beforeEach

技术分享图片

afterEach

技术分享图片

 

在单个路由里有beforeEnter

技术分享图片

 

在组件中有beforeRouteEnter,beforeRouteUpdate和beforeRouterLeave,beforeRouteEnter在运行方法的时候组件还没创建,this为undefined

 技术分享图片

可以用回调函数代替this访问实例

 

vue-router的使用

原文:https://www.cnblogs.com/ninefrom/p/10435791.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!