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

? ? ?//頁面重新加載數據

}

}