VueJS handle URL fragment to action without Vue Router and without jQuery

Question

I am currently using VueJS 2.x and have not gone VueRouter yet (and am not able anyway).

Quite simply, I want Vue to detect a URL fragment like https://example.com/mypage#record-17 and for example simulate the click of the following modal link:

<a :id="record.id" :click="openModal(record.id)">Open this record</a>

Should I just parse window.location myself or is there a more elegant way to do it? I also want to not use jQuery.

Possible duplicate of [Getting URL hash location, and using it in jQuery](https://stackoverflow.com/questions/1822598/getting-url-hash-location-and-using-it-in-jquery) — maxpaj, Jun 21 '18 at 07:16
The accepted answer is jQuery-free (which I wanted, we're moving away from jQuery), and is worth looking at. — Oliver Williams, Jun 21 '18 at 10:02

score 1 · Accepted Answer · answered Jun 21 '18 at 07:29

This is our script for parsing args from the hash. It lets you put a query string after the hash, that will be parsed by the script. If, like us, you also need to pass an url that you don't want parsed, put it at the end in a 'src' argument.

    var args = (function () {
        var returnVal = {};

        var argString = window.location.hash;
        //everything after src belongs as part of the url, not to be parsed
        var argsAndSrc = argString.split(/src=/);
        returnVal["src"] = argsAndSrc[1];
        //everything before src is args for this page.
        var argArray = argsAndSrc[0].split("&");
        for (var i = 0; i < argArray.length; i++) {
            var nameVal = argArray[i].split("=");
            //strip the hash
            if (i == 0) {
                var name = nameVal[0];
                nameVal[0] = name.slice(1);
            }
            returnVal[nameVal[0]] = decodeURI(nameVal[1]);
        }
        return returnVal
    })();

You didn't go with a dependency and wrote your own. *Gasp* ;) — Oliver Williams, Jun 21 '18 at 10:01

VueJS handle URL fragment to action without Vue Router and without jQuery

1 Answers1