使用vue路由做一个选项卡

• router-link相当于<a>标签
• 路由是基于a的锚点创建的,
• 每一个路由参数是一个对象,每个对象对应着一个地址

步骤

1. 导入vue
2. 导入vue路由
3. 创建<router-link></router-link>标签
4. 通过<router-view></router-view>渲染路由
5. 创建选项卡
6. 注册路由并且配置,配置时每一个路由参数是一个对象,每个对象对应着一个地址,
7. 创建vue实例并绑定挂载点
8. 将配置好的路由地址通过to添加到<router-link to="****"></router-link>标签之中,

效果图(我不会做动图,多上两张图吧):

---

代码如下:

    <div class="box">
      <!-- router-link相当于<a>标签 -->
      <!--  路由是基于a的锚点创建的 -->
      <router-link to="/pa1">手机</router-link>
      <router-link to="/pa2">水果</router-link>
      <router-link to="/pa3">时间</router-link>
      <!--  渲染这个路由 -->
      <router-view></router-view>
    </div>
    <script>
      const pa1 = {
        template: "<p>三星 华为 小米</p>",
      };
      const pa2 = {
        template: "<p>苹果 橘子 榴莲</p>",
      };
      const pa3 = {
        template: "<p>上午 中午 下午</p>",
      };
      // 注册路由
      const router = new VueRouter({
        // 配置
        // 每一个路由参数是一个对象,每个组件对象对应着一个地址
        routes: [
          { path: "/pa1", component: pa1 },
          { path: "/pa2", component: pa2 },
          { path: "/pa3", component: pa3 },
        ],
      });
      new Vue({
        router: router,
        el: ".box",
      });
    </script>
  </body>