哈希锚点原生实现一个路由、使用vue路由模块实现一个前端路由

1.哈希锚点实现一个原生的路由

   <nav>
        <a href="#list1">国内新闻</a>
        <a href="#list2">娱乐新闻</a></a>
    </nav>
    <!-- 该区域用于显示路由的内容 -->
    <div class="route-view"></div>
    <script>
        let list1 = `
        <ul>
          <li><a href="">返乡人员如何划定？国家卫健委最新回应</a></li>
          <li><a href="">返乡人员如何划定？国家卫健委最新回应</a></li>
          <li><a href="">返乡人员如何划定？国家卫健委最新回应</a></li>
        </ul>
        `;
        let list2 = `
        <ul>
          <li><a href="">都当妈了还不许人家晒晒娃？</a></li>
          <li><a href="">都当妈了还不许人家晒晒娃？</a></li>
          <li><a href="">都当妈了还不许人家晒晒娃？</a></li>
        </ul>
        `;
        // 获取路由的内容显示区元素
        const routeView = document.querySelector(".route-view");
        window.addEventListener("hashchange", show);
        // 页面加载完就执行
        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路由模块实现一个前端路由

点击今日话题

点击游戏新闻


    <!-- 加载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>
        <!-- 路由到的资源显示区域 -->
        <router-view></router-view>
    </nav>
    <script>
        const list1 = {
            template: `
                <ul>
                  <li><a href="">80多份裁判文书背后的中老年“养生培训”套路</a></li>
                  <li><a href="">80多份裁判文书背后的中老年“养生培训”套路</a></li>
                  <li><a href="">80多份裁判文书背后的中老年“养生培训”套路</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. 创建路由
        const router = new VueRouter({
            // 配置路由
            routes: [
                { path: "/list1", component: list1 },
                { path: "/list2", component: list2 },
            ],
        });
        new Vue({
            // 2. 注册路由
            router,
        }).$mount(".app");
    </script>

1.哈希锚点实现一个原生的路由

2.vue路由模块实现一个前端路由

相关文章