li x li x -4 years ago 120
Javascript Question

Can't Parse VueJS 2 hash as an empty string

I'm currently working on trying to determine if a hash is present in the url and I'm getting some odd results. The below code when run with a url such as

http://localhost:8080/subscribers#test
runs correctly and outputs as
#test
which is perfect, but when I simply request
http://localhost:8080/subscribers
it appears as
hash: ""
. My initial thoughts were simple
this.$route.query.hash === ''
which according to the chrome dev tools is correct. But here's where it gets odd as that alongside a
null
and
undefined
or
'undefined'
check both don't match my if statement.

mounted: function () {
if (this.$route.query.hash === '' || this.$route.query.hash === 'undefined' || this.$route.query.hash === null) {
console.log(this.$route.hash)
console.log(this.$route)
console.log('grabbing auth')
} else {
console.log(this.$route.hash)
console.log(this.$route)
console.log('attempting redirect')
}
}


Console out put, shows as attempting redirect:

enter image description here

Can someone figure out why this is or am I doing something wrong?

edit:

using
if (this.$route.query.hash) {
also provides the same odd results where the if statement is never validated as true.

Answer Source

Have you tried removing .query from the statement?

Also note that if you don't fully force a refresh rather than just adding a #test and then accepting the url you will cause a dom refresh but you won't cause the router to update which is why your getting odd results from the console. If you performed a full refresh such as returning from or coming from a different website then it will parse the # correctly.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download