第26章 0120-vue路由原理与实现，学习心得，笔记（Vue路由）

今天所学心得、笔记

1、哈希（锚点）原生实现前端路由

<body>
<nav>
    <a href="#/list1">国际新闻</a>
    <a href="#/list2">科技新闻</a>
</nav>
<!-- 用于显示路由的内容 -->
<div class="route-view"></div>
<script>
    const list1 = `
        <ul>
            <li>马斯克：我们将在五年半内登陆火星</li>
            <li>马斯克：我们将在五年半内登陆火星</li>
            <li>马斯克：我们将在五年半内登陆火星</li>
        </ul>
    `;
    const list2 = `
        <ul>
            <li>抖音大战春晚红包：社交、支付、电商齐上阵</li>
            <li>抖音大战春晚红包：社交、支付、电商齐上阵</li>
            <li>抖音大战春晚红包：社交、支付、电商齐上阵</li>
        </ul>
    `;
    // 获取路由显示区
    const routerView = document.querySelector(".route-view");
    // hashchange: url中的锚点变化时会自动触发这个事件
    window.addEventListener("hashchange", show);
    // DOMContentLoaded: 只要dom树创建完成就会触发,load:要等js执行完成和图片加载完成才触发
    window.addEventListener("DOMContentLoaded", show);
    function show() {
        console.log(location.hash);
        switch (location.hash) {
            case "#/list1":
                routerView.innerHTML = list1;
                return;
            case "#/list2":
                routerView.innerHTML = list2;
                return;
            default:
                routerView.innerHTML = list1;
        }
    }
</script>
</body>

2、vue路由模块, 前端路由

<body>
<nav class="app">
    <router-link to="/list1">国际新闻</router-link>
    <router-link to="/list2">科技新闻</router-link>
    <!-- 路由的资源显示区 -->
    <router-view></router-view>
</nav>
<script>
    const list1 = {
        template: `
            <ul>
                <li>马斯克：我们将在五年半内登陆火星</li>
                <li>马斯克：我们将在五年半内登陆火星</li>
                <li>马斯克：我们将在五年半内登陆火星</li>
            </ul>
        `,};
    const list2 = {
        template: `
            <ul>
                <li>抖音大战春晚红包：社交、支付、电商齐上阵</li>
                <li>抖音大战春晚红包：社交、支付、电商齐上阵</li>
                <li>抖音大战春晚红包：社交、支付、电商齐上阵</li>
            </ul>
        `,};
    // 1. 创建路由对象
    const router = new VueRouter({
        //路由配置
        routes: [
            // 每一个路由都是一个对象,每一个对象对应着一个路由地址
            { path: "/list1", component: list1 },
            { path: "/list2", component: list2 },
        ]
    });
    //2. 注册路由
    new Vue({
        el: ".app",
        // router: router,
        router,
    })
</script>
</body>

今天所学心得、笔记

1、哈希（锚点）原生实现前端路由

2、vue路由模块, 前端路由

更多相关文章

随机推荐