When will the new vue in this code be called?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="author" content="">
    <title> Vue </title>
    <style type="text/css">
        .router_box,
        -sharprouter-view {
            max-width: 1000px;
            margin: 50px auto;
            padding: 0 20px;
        }

        .router_box>a {
            padding: 0 10px;
            color: -sharp42b983;
        }
    </style>
</head>

<body>
<div class="router_box">
    <a href="/home" class="router"></a>
    <a href="/news" class="router"></a>
    <a href="/team" class="router"></a>
    <a href="/about" class="router"></a>
</div>
<div id="router-view"></div>
<script type="text/javascript">
    function Vue(parameters) {
        let vue = {};
        vue.routes = parameters.routes || [];
        vue.init = function() {
            document.querySelectorAll(".router").forEach((item, index) => {
                item.addEventListener("click", function(e) {
                    let event = e || window.event;
                    event.preventDefault();
                    window.location.hash = this.getAttribute("href");
                }, false);
            });

            window.addEventListener("hashchange", () => {
                vue.routerChange();
            });

            vue.routerChange();
        };
        vue.routerChange = () => {
            let nowHash = window.location.hash;
            let index = vue.routes.findIndex((item, index) => {
                return nowHash == ("-sharp" + item.path);
            });
            if (index >= 0) {
                document.querySelector("-sharprouter-view").innerHTML = vue.routes[index].component;
            } else {
                let defaultIndex = vue.routes.findIndex((item, index) => {
                    return item.path == "*";
                });
                if (defaultIndex >= 0) {
                    window.location.hash = vue.routes[defaultIndex].redirect;
                }
            }
        };

        vue.init();
    }
    new Vue({
        routes: [{
            path: "/home",
            component: "<h1></h1><a href="https://github.com/biaochenxuying">https://github.com/biaochenxuying</a>"
        }, {
            path: "/news",
            component: "<h1></h1><a href="http://biaochenxuying.cn/main.html">http://biaochenxuying.cn/main.html</a>"
        }, {
            path: "/team",
            component: "<h1></h1><h4></h4>"
        }, {
            path: "/about",
            component: "<h1></h1><h4>:BiaoChenXuYing</h4> WEB "
        }, {
            path: "*",
            redirect: "/home"
        }]
    });
</script>
</body>

</html>
when will the new vue in this code be called? When will function Vue () in this code be called? What is the relationship between them? can you understand it?