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 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(){
//页面重新加载数据
}
}
更多推荐


所有评论(0)