vue-router中哈希模式和history模式的使用方法

發(fā)布時間：2020-06-05 17:42:26 來源：億速云閱讀：329 作者：Leah 欄目：web開發(fā)

這篇文章主要為大家詳細介紹了vue-router中哈希模式和history模式的使用方法，文中示例代碼介紹的非常詳細，感興趣的小伙伴們可以參考一下。

單頁一應(yīng)用的路由模式有兩種
1、哈希模式（利用hashchange事件監(jiān)聽url的hash的改變）
window.addEventListener("hashchange", function (e) {console.log(e)})
2、history模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript" src="vue.js"></script>
    <a href="#/login">登錄</a>
    <a href="#/register">注冊</a>
    <div id="app"></div>
    <script type="text/javascript">
        var appdiv = document.getElementById("app")
        window.addEventListener("hashchange", function (e) {
            console.log(e.newURL)
                        // #/login
            console.log(location.hash)
            switch (location.hash) {
                case "#/login":appdiv.innerHTML="我是登錄頁面";
                    break;
                case "#/register":appdiv.innerHTML="我是注冊頁面";
                break;
            }
        })
    </script>

</body>
</html>

以上就是vue-router中哈希模式和history模式的使用方法介紹，看完之后是否有所收獲呢？如果想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊！

向AI問一下細節(jié)

vue-router中哈希模式和history模式的使用方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽