用原生js和veurouter实现路由功能

一.原生js路由：

前置知识：
1.锚点可以改变url地址，实现在当前页面内部的不同区域之间进行跳转，所以页面不会刷新
2.location.hash: 得到的是锚链接,第一个#后面出现的任何字符
3.hashchange: url中的锚点变化时会自动触发这个事件

---

了解了以上知识，就可以开始实战了，先做好锚点和显示区域：

    <nav>
        <a href="#/news">新闻</a>
        <a href="#/sports">体育</a>
        <a href="#/calture">文化</a>
    </nav>
    <div class="content"></div>

显示给相应的锚点做好显示内容：

        let news=`
    <ul>
        <li><a href="">外交部宣布中方对蓬佩奥等28人实施制裁 理上网来</a> </li>
        <li><a href="">奋斗百年路 一部法典背后的公平正义宣言 制度优势</a> </li>
        <li><a href="">2020年居民收入榜：上海人均可支配收入超7万元</a> </li>
    </ul>
    `;
    let sports=`
    <ul>
        <li><a href="">中德足协召开视讯会议 推动视频助理裁判项目合作</a> </li>
        <li><a href="">孙准浩近日将抵达济南 泰山队冬训持续到春节前</a> </li>
        <li><a href="">世界俱乐部排名TOP400：中超四队入围 国安119位</a> </li>
    </ul>
    `;
    let calture=`
    <ul>
        <li><a href="">湖北省博物馆十大“镇馆之宝”揭晓</a> </li>
        <li><a href="">山西北白鹅春秋大墓出土大量青铜器</a> </li>
        <li><a href="">湖北省博物馆十大“镇馆之宝”揭晓</a> </li>
    </ul>
    `;

获取路由显示区：

let content = document.querySelector(".content");

写一个函数，判断哈希值的变化，并根据相应的变化为内容区填上相应内容，因为是判断单一值变化，所以我们用switch：

function router(){
        switch(window.location.hash){
            case "#/sports":
                content.innerHTML = sports;
                break;
            case "#/news":
                content.innerHTML = news;
                break;
            case "#/calture":
                content.innerHTML = calture;
                break;
            default:content.innerHTML = news;
        }
    }

接下来就可以监听并执行函数了：

   window.onload=()=>{
        router();
    };
    window.addEventListener("hashchange",router);

window.onload也可以换成：

window.addEventListener("DOMContentLoaded", router);

---

二.用VueRouter写一个路由

注意：
1.锚点的标签是<router-link></router-link>,原生里面的href=””在VueRouter当中必须写成to=””。
2.显示区域：设置成<router-view><router-view/>也是固定搭配
所以锚点和显示区域应该如下：

    <nav class="box">
        <router-link to="/news">新闻</router-link>
        <router-link to="/sports">体育</router-link>
        <router-link to="/calture">文化</router-link>
        <!-- ver-router的显示区域： -->
        <router-view></router-view>
    </nav>

显示的内容有点类似组件的模版：

        const news={
            template:`
    <ul>
        <li><a href="">外交部宣布中方对蓬佩奥等28人实施制裁 理上网来</a> </li>
        <li><a href="">奋斗百年路 一部法典背后的公平正义宣言 制度优势</a> </li>
        <li><a href="">2020年居民收入榜：上海人均可支配收入超7万元</a> </li>
    </ul>
    `,};
    const sports={
            template:`
            <ul>
        <li><a href="">中德足协召开视讯会议 推动视频助理裁判项目合作</a> </li>
        <li><a href="">孙准浩近日将抵达济南 泰山队冬训持续到春节前</a> </li>
        <li><a href="">世界俱乐部排名TOP400：中超四队入围 国安119位</a> </li>
    </ul>
    `,};
    const calture={
            template:`
            <ul>
        <li><a href="">湖北省博物馆十大“镇馆之宝”揭晓</a> </li>
        <li><a href="">山西北白鹅春秋大墓出土大量青铜器</a> </li>
        <li><a href="">湖北省博物馆十大“镇馆之宝”揭晓</a> </li>
    </ul>
    `,};

创建一个路由，并关联锚点和内容,非常的直观:

    const router = new VueRouter({
        // 路由配置：
        routes:[
            {path:"/news",component:news},
            {path:"/sports",component:sports},
            {path:"/calture",component:calture},
        ],
    });

再注册一下路由，就可以运行了：

   new Vue({
        el:".box",
        // 注册路由：
        router:router,
    })

运行效果如下：