国产欧美精品一区二区三区,国产一区日韩二区欧美三区,欧美freesex10一13

首頁 > 博客列表 > 哈希錨點原生實現(xiàn)一個路由、使用vue路由模塊實現(xiàn)一個前端路由

博主信息

博文 47

粉絲 3

評論 0

訪問量 49474

專題推薦

更多>

1.哈希錨點實現(xiàn)一個原生的路由

   <nav>
        <a href="#list1">國內(nèi)新聞</a>
        <a href="#list2">娛樂新聞</a></a>
    </nav>
    <!-- 該區(qū)域用于顯示路由的內(nèi)容 -->
    <div class="route-view"></div>
    <script>
        let list1 = `
        <ul>
          <li><a href="">返鄉(xiāng)人員如何劃定？國家衛(wèi)健委最新回應</a></li>
          <li><a href="">返鄉(xiāng)人員如何劃定？國家衛(wèi)健委最新回應</a></li>
          <li><a href="">返鄉(xiāng)人員如何劃定？國家衛(wèi)健委最新回應</a></li>
        </ul>
        `;
        let list2 = `
        <ul>
          <li><a href="">都當媽了還不許人家曬曬娃？</a></li>
          <li><a href="">都當媽了還不許人家曬曬娃？</a></li>
          <li><a href="">都當媽了還不許人家曬曬娃？</a></li>
        </ul>
        `;
        // 獲取路由的內(nèi)容顯示區(qū)元素
        const routeView = document.querySelector(".route-view");
        window.addEventListener("hashchange", show);
        // 頁面加載完就執(zhí)行
        window.addEventListener("DOMContentLoaded", show);
        function show() {
            // console.log(location.hash);
            switch (location.hash) {
                case "#list1":
                    routeView.innerHTML = list1;
                    return;
                case "#list2":
                    routeView.innerHTML = list2;
                    return;
                default:
                    routeView.innerHTML = list1;
            }
        }
    </script>

2.vue路由模塊實現(xiàn)一個前端路由

點擊今日話題

點擊游戲新聞


    <!-- 加載vue框架 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 路由模塊 -->
    <script src="vue-router-dev/dist/vue-router.js"></script>
<body>
    <nav class="app">
        <!-- vue路由錨點 -->
        <router-link to="/list1">今日話題</router-link>
        <router-link to="/list2">游戲新聞</router-link>
        <!-- 路由到的資源顯示區(qū)域 -->
        <router-view></router-view>
    </nav>
    <script>
        const list1 = {
            template: `
                <ul>
                  <li><a href="">80多份裁判文書背后的中老年“養(yǎng)生培訓”套路</a></li>
                  <li><a href="">80多份裁判文書背后的中老年“養(yǎng)生培訓”套路</a></li>
                  <li><a href="">80多份裁判文書背后的中老年“養(yǎng)生培訓”套路</a></li>
                </ul>
              `,
        };
        const list2 = {
            template: `
                <ul>
                  <li><a href="">LPL春季賽：RNG2-0擊敗OMG！Cryin豪取5殺</a></li>
                  <li><a href="">LPL春季賽：RNG2-0擊敗OMG！Cryin豪取5殺</a></li>
                  <li><a href="">LPL春季賽：RNG2-0擊敗OMG！Cryin豪取5殺</a></li>
                </ul>
              `,
        };
        // 1. 創(chuàng)建路由
        const router = new VueRouter({
            // 配置路由
            routes: [
                { path: "/list1", component: list1 },
                { path: "/list2", component: list2 },
            ],
        });
        new Vue({
            // 2. 注冊路由
            router,
        }).$mount(".app");
    </script>

批改老師：

天蓬老師

批改狀態(tài)：合格

老師批語：

本博文版權歸博主所有，轉載請注明地址！如有侵權、違法，請聯(lián)系admin@php.cn舉報處理！

全部評論文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務協(xié)議

0條評論

作者最新博文

值傳遞與引用傳遞、數(shù)組對象解構、bind,Call,apply、訪問器、流程控制、三元運算

2021-01-06 01:59:18

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

1.哈希錨點實現(xiàn)一個原生的路由

2.vue路由模塊實現(xiàn)一個前端路由