JS和Vue框架实现路由小案例

原生实现路由案例

<div class="app">
  <ul>
     <li><a href="#list1">国内新闻</a></li>
     <li><a href="#list2">国际新闻</a></li>
  </ul>
<div class="list"></div>
</div>
<script>
const list1 = `
    <ul>
       <li><a href=""> 春节返乡要居家隔离？返乡人员如何划定？卫健委回应 </a></li>
       <li><a href=""> 春节返乡要居家隔离？返乡人员如何划定？卫健委回应 </a></li>
       <li><a href=""> 春节返乡要居家隔离？返乡人员如何划定？卫健委回应 </a></li>
       <li><a href=""> 春节返乡要居家隔离？返乡人员如何划定？卫健委回应 </a></li>
       <li><a href=""> 春节返乡要居家隔离？返乡人员如何划定？卫健委回应 </a></li>
       <li><a href=""> 春节返乡要居家隔离？返乡人员如何划定？卫健委回应 </a></li>
       <li><a href=""> 春节返乡要居家隔离？返乡人员如何划定？卫健委回应 </a></li>
    </ul>
`;
const list2 = `
    <ul>
       <li><a href="">拜登宣誓并强调"团结" 就职首日推翻9项特朗普政令 </a></li>
       <li><a href="">拜登宣誓并强调"团结" 就职首日推翻9项特朗普政令 </a></li>
       <li><a href="">拜登宣誓并强调"团结" 就职首日推翻9项特朗普政令 </a></li>
       <li><a href="">拜登宣誓并强调"团结" 就职首日推翻9项特朗普政令 </a></li>
       <li><a href="">拜登宣誓并强调"团结" 就职首日推翻9项特朗普政令 </a></li>
       <li><a href="">拜登宣誓并强调"团结" 就职首日推翻9项特朗普政令 </a></li>
       <li><a href="">拜登宣誓并强调"团结" 就职首日推翻9项特朗普政令 </a></li>
       <li><a href="">拜登宣誓并强调"团结" 就职首日推翻9项特朗普政令 </a></li>
    </ul>
`;
      const lists = document.querySelector(".list");
      // 监听锚点被点击的时候调用show函数显示相应的列表
      window.addEventListener("hashchange", show);
      //监听页面加载的时候调用show函数显示列表
      window.addEventListener("load", show);
      function show() {
      //location.hash是获取锚点的名称
        console.log(location.hash);
        switch (location.hash) {
          case "#list1":
            lists.innerHTML = list1;
            return;
          case "#list2":
            lists.innerHTML = list2;
            return;
          default:
            lists.innerHTML = list1;
        }
      }
    </script>

用Vue路由库实现案例

//引入Vue路由库
<script src="vue-router-dev/dist/vue-router.js"></script>
<div class="app">
      <router-link to="/list1">国内新闻</router-link>
      <router-link to="/list2">国际新闻</router-link>
      <router-view></router-view>
    </div>
    <script>
      const list1 = {
        template:`
        <ul>
            <li><a href=""> 春节返乡要居家隔离？返乡人员如何划定？卫健委回应 </a></li>
            <li><a href=""> 春节返乡要居家隔离？返乡人员如何划定？卫健委回应 </a></li>
            <li><a href=""> 春节返乡要居家隔离？返乡人员如何划定？卫健委回应 </a></li>
            <li><a href=""> 春节返乡要居家隔离？返乡人员如何划定？卫健委回应 </a></li>
            <li><a href=""> 春节返乡要居家隔离？返乡人员如何划定？卫健委回应 </a></li>
            <li><a href=""> 春节返乡要居家隔离？返乡人员如何划定？卫健委回应 </a></li>
            <li><a href=""> 春节返乡要居家隔离？返乡人员如何划定？卫健委回应 </a></li>
            </ul>
        `};
      const list2 = {
        template:`
        <ul>
            <li><a href="">拜登宣誓并强调"团结" 就职首日推翻9项特朗普政令 </a></li>
            <li><a href="">拜登宣誓并强调"团结" 就职首日推翻9项特朗普政令 </a></li>
            <li><a href="">拜登宣誓并强调"团结" 就职首日推翻9项特朗普政令 </a></li>
            <li><a href="">拜登宣誓并强调"团结" 就职首日推翻9项特朗普政令 </a></li>
            <li><a href="">拜登宣誓并强调"团结" 就职首日推翻9项特朗普政令 </a></li>
            <li><a href="">拜登宣誓并强调"团结" 就职首日推翻9项特朗普政令 </a></li>
            <li><a href="">拜登宣誓并强调"团结" 就职首日推翻9项特朗普政令 </a></li>
            <li><a href="">拜登宣誓并强调"团结" 就职首日推翻9项特朗普政令 </a></li>
            </ul>
        `};
        const router = new VueRouter({
          routes:[
            {path:'/list1',component:list1},
            {path:'/list2',component:list2},
          ],
        })
         const vm = new Vue({
          el:'.app',
          router:router,
        })
    </script>