page里面detail.vue
export default { 
    name: 'detail', 

}
vue2里面.vue的页面都会设置一个name,这个通常是写死的。不能在页面动态设置的。页面刷新缓存通常都是根据这个name来判断的。如果name写死。我几个页面都通用这一个页面的话,他也不刷新页面啊。
比如。我从detail1,切换到了detail2.都是一个detail页面。所以他就缓存了不会刷新页面。
{ 
  path: 'a/detail', 
  name: 'detail1', 
  component: () => import('../views/Page/detail.vue')},
 { 
  path: 'b/detail2', 
  name: 'detail2',
  component: () => import('../views/Page/detail.vue'),
},

解决办法1:

/**
 * 将指定组件设置自定义名称
 *
 * @param {String} name 组件自定义名称
 * @param {Component | Promise<Component>} component
 * @return {Component}
 */
export function createCustomComponent (name, component) {
  return {
    name,
    data () {
      return { component: null }
    },
    async created () {
      if (component instanceof Promise) {
        try {
          const module = await component
          this.component = module?.default
        } catch (error) {
          console.error(`can not resolve component ${name}, error:`, error)
        }

        return
      }
      this.component = component
    },
    render (h) {
      return this.component ? h(this.component) : null
    },
  }
}

然后再定义路由的页面使用

{
  path: 'a/detail',
name: 'detail1',
component: () =>createCustomComponent('detail1', import(''../views/Page/detail.vue')),
{
  path: 'b/detail2',
name: 'detail2',
component: () => createCustomComponent('detail2', import(''../views/Page/detail.vue')),
},

方法2:

在detail.vue页面检测路由的变化

watch: {
  '$route' (to) {
    // 路由发生变化
   console.log("----路由发生变化-----");
   this.$nextTick(()=>{
     this.reload()
   })
  },
},

methods:{

   reload(){

     //页面重新加载数据

}

}

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐