vue-router中参数传递 && 编程式导航 && 坑 && beforeRouteEnter
第一部分: vue-router参数传递
通过router-link我们可以向路由到的组件传递参数,这在我们实际使用中时非常重要的。
路由:
{ path:"/DetailPage", component: DetailPage, name: "详情页" },
router-link:
<router-link :to="{path: '/DetailPage', query: {index: index}}"> <div class="item-img">
<p>路由<p> </div> </router-link>
DetailPage页面:
<p>{{$route.query.index}}</p>
即: 在DetailPage页面我们可以通过$route.query.index 来获取到router-link中的值,因为router-link使用的时v-bind:,所以我们传递的index: index中的值index是可以变化的,即动态传递。
这样的结果是在路由切换时,在url中出现查询字符串即 localhost:8080/#/DetailPage?index=0
这是在template中获取,如果需要在js中获取,使用 this.$route.query.index 即可获取。
如下:
<router-link :to="{path: '/commodity/payment/editAddress', query: { id: item.id, name: item.name, contact: item.contact, address: item.address }}"> <div class="address-info"> <div class="name-contact"> <span class="name">{{item.name}}</span> <span class="contact">{{item.contact}} </span> </div> <div class="address">{{item.address}}</div> </div> </router-link>
即通过查询字符串,我们可以传递很多信息。
在js中的使用如下:
export default { data: function () { return { name: this.$route.query.name, contact: this.$route.query.contact, address: this.$route.query.address } },
第二部分: 编程式导航
在vue-router中单独介绍了编程式导航,之前看了文档,不知道其作用是什么,但是在实际项目中遇到了问题,所以才又发现他的作用,这里特地记录。
背景: 用户在修改收货地址页面点击,修改完成之后,页面不动! 必须要手动返回,所以,这时就需要路由了。
方法如下:
this.editAddress(editedAddress).then(function () { alert("修改成功!"); that.$router.go(-1); });
即: 在editAddress,定义在actions中的方法(返回一个promise),当resolve的时候,就alert成功,然后使用this.$router.go(-1),即返回上一个页面。
这里使用that,是因为在之前我赋值 var that = this 在内部获取this获取不到,会报错,需要注意。
首先我们看看什么是编程式导航。
也就是说,当我们使用 router-link 连接时,相当于调用了 router.push() , 即将访问页面、路由看做是入栈,在点击返回按钮时,就是出栈,这样就很好理解了。
router.push()的参数可以是一个字符串,也可以是一个描述地址的对象:
// 字符串 router.push('home') // 对象 router.push({ path: 'home' }) // 命名的路由 router.push({ name: 'user', params: { userId: 123 }}) // 带查询参数,变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }})
注意:在传递参数/值方面, 使用router.push({path: '', query: ""});这种形式来传递值是非常方便的。
router.replace()
和router.push()不同,使用router.push()会将一个访问记录push到url中,所以再退回了的时候一定会回到这里,而router.replace()不是添加一个新的进入,而是替换栈顶元素,这样,在返回的时候,就会返回到栈顶元素的下面一个。
router.go()
这个方法的参数是一个整数,即前进或后退路由的多少步,类似于window.history.go(n)。 举例如下:
// 在浏览器记录中前进一步,等同于 history.forward() router.go(1) // 后退一步记录,等同于 history.back() router.go(-1) // 前进 3 步记录 router.go(3) // 如果 history 记录不够用,那就默默地失败呗 router.go(-100) router.go(100)
第三部分: 坑
我们知道,在一般的.vue文件中, this指向的时Vue实例,所以我们可以使用this.$router等方法,但是在store下的js文件中,this指向的就是我们普通所说的this了,所以使用this.$router一定是会出错的,所以之前一直不知道怎么解决,而处理的办法是使用promise, 即在action中使用promise,当成功时,又回到了 .vue 页面,然后就可以使用this.$router定位到我们想要的页面了。 但是这总归是一种绕过问题的方法,是不可取的,所以,这时需要做的就是 stackoverflow 上去搜索了。 不出意料, 我们可以看到问题如下:
https://stackoverflow.com/questions/40736799/how-to-navigate-using-vue-router-from-vuex-actions
./router就是我们在src下的router文件,实际上是./router/index.js的省略。
beforeRouteEnter
beforeRouteEnter (to, from, next) {
console.log(from.path);
next();
},
通过这个钩子函数,我们就可以获取到相关的路由了。
更多看这里。。。 https://router.vuejs.org/en/advanced/navigation-guards.html
这里非常重要的一点就是vue-router中beforeRouterEnter 的时间是早于vuex中的create的,所以,我们可以根据路由信息进行判断。
相关文章
- 死锁、活锁、饥饿&定位死锁&解决死锁
- linux 服务器中设置crontab 定时任务&计算时间差值
- SSIS- How To Export & Import ISPAC File SSISDB – Visual Studio
- CSS & JS Effect – Tooltip
- HTML & CSS – Responsive Image 响应式图片 (完整版)
- [云计算]概念辨析:云计算 [IaaS/PaaS/SaaS & 公有云/私有云/混合云]
- 【云计算】Docker多进程管理方案-cfengine && supervisord
- G - Can you answer these queries? & N - 花神游历各国
- Vue Admin - 基于 Vue & Bulma 后台管理面板
- vue&&react项目更好实践
- WPF 窗口居中 & 变更触发机制
- mysql:子查询的陷阱&where型子查询
- koa&vue的分页实现
- vue项目版本更新后文件存在缓存问题解决方案(vue-cli2.0&vue-cli3.0)
- 基于vue的下拉刷新&滚动刷新指令
- 详解 Vue & Vuex 实践
- 独享锁 & 共享锁
- N个数中选择M个数的组合(1<M<N)
- 我的Android进阶之旅------>Android如何通过自定义SeekBar来实现视频播放进度条
- 03CSS浮动布局&盒模型