vue2.如何给一个页面设置动态的name。不同路由使用一样的组件。页面不刷新怎么办？

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 componentthis.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(){

     //页面重新加载数据

}

}