Vue-Router 源码分析(七) VueRouter.push()的详解
程序员文章站
2022-04-03 22:03:59
通过VueRouter实例的push()操作,可以进行路由跳转,对于 组件来说,它绑定的是click事件,最后也是通过执行push()方法来进行路由跳转的。 对于push()方法来说,一共可以传入三种形式的参数: 字符串形式,值为路劲 含有name的对象形式,可以搭配par ......
通过vuerouter实例的push()操作,可以进行路由跳转,对于<router-link/>组件来说,它绑定的是click事件,最后也是通过执行push()方法来进行路由跳转的。
对于push()方法来说,一共可以传入三种形式的参数:
- 字符串形式,值为路劲
- 含有name的对象形式,可以搭配params属性传递参数
- 含有path的对象形式
举个栗子:
<div id="app"> <button @click="test">测试</button> <hr/> <router-view></router-view> </div> <script> const info = { template:'<div>page info</div>'} //登陆页 const home = { template:'<div>page home:{{this.$route.params.uid}}</div>'} //主页 const detail = { template:'<div>page detail:{{this.$route.params.id}}</div>'} //详情页 const router = new vuerouter({ routes:[ {path:'/info',component:info}, {path:'/home/:uid',component:home,name:'home'}, {path:'/detail/:id',component:detail,} ] }) const app = new vue({ el:'#app', data:{no:0}, router:router, methods:{ test(){ this.no = this.no%3+1; switch(this.no){ //点击测试按钮将依次跳转到三个不同的组件,跳转时使用的push参数也不同 case 1: this.$router.push('/info') break; case 2: this.$router.push({name:'home',params:{uid:10}}) break; case 3: this.$router.push({path:'/detail/15'}) break; } } } }) </script>
点击按钮时分别执行三个不同参数的push操作,如下:
我们执行push()进行路由跳转时,会执行vuerouter源码内history对象上的push()操作,然后会执行transitionto()函数进行路由跳转,在该函数内首先会执行normalizelocation对参数做出修正,统一修正为一个对象,因此对于push('/login')和push({path:'/login'})来说是一样的。
推荐阅读
-
vuex 源码分析(七) module和namespaced 详解
-
Vue-Router 源码分析(三) VueRouter实例的属性和方法
-
Mapreduce源码分析(二):MapTask及LineRecordReader读取文件的工作机制,源码详解
-
通过源码分析Vue的双向数据绑定详解
-
Vue-Router 源码分析(七) VueRouter.push()的详解
-
Mybaits 源码解析 (七)----- Select 语句的执行过程分析(下篇)全网最详细,没有之一
-
Vue 2.0 深入源码分析(七) 基础篇 侦听器 watch属性详解
-
jQuery源码分析之jQuery中的循环技巧详解
-
Vue-Router 源码分析(六) router-view组件的用法及原理
-
Highcharts中的宽度自适应问题详解--源码分析