vue3 线上环境切换路由卡死

项目配置

• vue@3
• vite@2
• ts
• vue-router@4

问题

开发环境上没有问题，部署线上切换路由浏览器页面卡死

'window.webkitStorageInfo' is deprecated. Please use 'navigator.webkitTemporaryStorage' or 'navigator.webkitPersistentStorage' instead.

主要由watch监听整个useRouter()引发浏览器页面卡死

未解决之前代码如下:

let route = useRoute()
// 当前路由name
let currentName = ref()

watch(route,(val)=>{
    currentName.value = val.name
    // 获取tags
    let isExist = tags.filter(item => item.name == currentName.value).length > 0 ? true : false
    let to = JSON.parse(JSON.stringify(val))
    console.log(to);
    if(!isExist && val.name !== "redirect"  && val.name !== "404"){
        store.commit('tagsCommit',{to})
    }
},{
    immediate:true
})

解决

将watch改为computed() 计算属性

解决后代码如下：

// 当前路由name
let currentName = computed(()=>{
let isExist = tags.filter(item => item.name == route.name).length > 0 ? true : false
	addTag(route,isExist)
	return route.name
})

function addTag(val,isExist){
	let to = JSON.parse(JSON.stringify(val.matched[val.matched.length - 1]))
	console.log(to);

	if(!isExist && val.name !== "redirect"  && val.name !== "404"){
    store.commit('tagsCommit',{to})
	}
}

也可以使用watch监听useRoute().xxx可以看此篇参考文章

最后附上自己vue3 + vite2 + element-plus的一个开源仓库：

GITEE 地址

GITHUB 地址

线上地址