Vue实现刷新当前路由
前言:在后台管理系统中,有这样一个需求点击当前菜单栏时,页面依旧可以刷新。
点击当前路由实现数据请求页面刷新
思路
点击当前菜单栏时,因为要进行跳转的路由和当前路由相同,所以router.push(当前路由)并不会执行。所以需要借由第三方组件来实现。
判断是否点击的当前路由,如果是则跳转到空白的第三方组件,并传递当前路由。在空白组件中created的生命周期中接受参数,并执行页面跳转。此时页面不会显示任何内容就开始进行跳转,所以速度的问题不用担心。视觉上的效果就是点击当前路由后,页面刷新请求数据。实际路由已经跳转了两次。
Code
//点击路由进行跳转操作 jump(url) { //判断是否是当前路由 if(url == this.$route.path) { this.$router.push({ path: 'redirect', query: rul }) } else { this.$router.push({ path: url }) } }
空白组件:
<template> <div></div> </template> <script> export default { data() { return { } }, created() { let url = this.$route.query; let str = ''; for(let i in url) { str += url[i]; } const path = this.$route.query; this.$router.push({ path: str, }); } } </script> <style> </style>
实现效果