学完前端，结局憋了一大招，经典VUE选项卡，简直太tm优秀了...

vue路由案例

案例展示：

vue路由案例

案例源码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./lib/vue.js"></script>
    <script src="./vue-router-dev/dist/vue-router.js"></script>
    <title>vue路由案例</title>
    <style>
      body {
        display: grid;
        width: 100%;
      }
      div {
        width: 35rem;
        background-color: #d3d7d4;
        padding: 1.2rem 0.5rem;
        margin: 1rem;
        border-radius: 1% 1% 0% 0%;
      }
      a {
        padding: 0.5em;
        text-align: left;
        text-decoration: none;
        color: #130c0e;
      }
      p {
        width: 35rem;
        background-color: #d3d7d4;
        border-top: 1px solid grey;
        height: 20rem;
        padding-top: 0.5rem;
      }
      a:hover {
        color: #4f5555;
      }
    </style>
  </head>
  <body>
    <div class="app">
      <!-- 1、创建路由 -->
      <router-link to="jffx">旧房翻新</router-link>
      <router-link to="jbzx">局部装修</router-link>
      <router-link to="qmfx">墙面翻新</router-link>
      <router-link to="fsbl">防水补漏</router-link>
      <router-link to="wxaz">维修安装</router-link>
      <!-- 2、渲染路由 -->
      <router-view></router-view>
    </div>
    <script>
      // 创建模板
      const jffx = {
        template:
          "<p>旧房翻新<ul><li>三室两厅装修</li><li>两室一厅装修</li><li>一室一厅装修</li></ul></p>",
      };
      const jbzx = {
        template:
          "<p>局部装修<ul><li>卫生间翻新装修</li><li>厨房翻新装修</li><li>阳台翻新翻新装修</li></ul></p>",
      };
      const qmfx = {
        template: "<p>墙面翻新</p>",
      };
      const fsbl = {
        template: "<p>防水补漏</p>",
      };
      const wxaz = {
        template: "<p>维修安装</p>",
      };
      // 3、注册路由
      const router = new VueRouter({
        // 配置路由
        routes: [
          { path: "/jffx", component: jffx },
          { path: "/jbzx", component: jbzx },
          { path: "/qmfx", component: qmfx },
          { path: "/fsbl", component: fsbl },
          { path: "/wxaz", component: wxaz },
        ],
      });
      const vm = new Vue({
        router: router,
        el: ".app",
      });
    </script>
  </body>
</html>

案例展示：

案例源码：

相关文章