location.search转为Vue的$route.query

1,164 阅读1分钟

location.search转为Vue的$route.query

在重构的项目中,其他项目跳转到当前项目并不是通过location.hash来添加对应的参数的,而是通过加载到location.search里面来传递参数的,那我们就不能通过 Vue Router的 this.$route.query来获取参数了,我们可以直接取用location.search的值,或者把 location.search 转为 query 数据

转化 location.search

在main.js中

// 一定要先注册 router 才行
app.use(store).use(router)

if (location.search) {
    const obj = {}
    location.search.split('?')[1].split('&').forEach(item => {
        const key = item.split('=')[0]
        const value = decodeURIComponent(item.split('=')[1])
        obj[key] = value 
    })
    app.config.globalProperties.$router.push({
        query: obj
    })
}

一定要先注册 router 才行,这样的话才有$router

使用

此时在.vue文件中就可以使用 this.$route.query 来获取 query数据了