vue刷新页面及路由跳转到同一页面的刷新问题

爱被打了一巴掌 2022-04-10 02:14 2408阅读 0赞

一、直接刷新当前页面的方法

  1. this.$router.go(0)

二、路由跳转到同一页面不刷新(页面内的路由跳转)

下面展示了一个vue组件的跳转逻辑,通过router-view的key不断更新,确保每次跳转到的路由好像是不一样的,实现每次进行路由跳转都会刷新。这样写在性能上可能有一些问题(未验证)

  1. <template>
  2. <el-aside id="isshow">
  3. <router-view :key="key"></router-view>
  4. </el-aside>
  5. </template>
  6. <script>
  7. export default {
  8. computed: {
  9. key() {
  10. //解决同一组件路由跳转,数据不刷新问题
  11. return this.$route.name !== undefined? this.$route.name +new Date(): this.$route +new Date()
  12. }
  13. },
  14. //某函数中需要跳转位置的写法
  15. this.$router.replace({name: 'xqdmRightForm',params:{ val:null ,change_id: '000'+new Date().getSeconds() ,type: 'add'}});
  16. </script>

上述路由跳转的代码中参数change_id的作用是让每次跳转过去的路由路径不同,通过路由定义时的/:change_id来定义。

  1. import Xy from '@/components/xydm/index'
  2. {
  3. path:"/xy",
  4. component:Xy,
  5. name: 'xydm',
  6. children: [{
  7. path: '/xydm/rightForm/:change_id',
  8. name: 'xydmRightForm',
  9. component: xydmRightForm
  10. }]
  11. },

http://comonly.cn/i/

发表评论

表情:
评论列表 (有 0 条评论,2408人围观)

还没有评论,来说两句吧...

相关阅读