vuejs2.0 选项卡效果类 tab插件

最新推荐文章于 2024-03-09 11:23:42 发布

原创

最新推荐文章于 2024-03-09 11:23:42 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

该博客介绍了如何在Vue.js 2.0中创建一个选项卡效果，其中左侧为选项，右侧使用router-view动态加载模块。通过监听路由变化，利用计算属性根据this.$route.path来更新顶部图片，并强调编程方式引入图片时需要使用require，以确保图片能在项目打包后正确加载。

这里写图片描述

页面分为左右两部分左边就是选项右侧通过router-view 动态加载相应的模块

如何实现最上面图片根据路由跳转实现动态切换？

<template>
  <div class="detail-wrap">
    <div class="detail-left">
      <div class="product-board">
        <img :src="productIcon">
        <ul>
          <router-link v-for="item in products" :to="{ path: item.path }" tag="li" active-class="active">
            {
   
   { item.name }}
          </router-link>
        </ul>
      </div>
    </div>
    <div class="detail-right">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      products: [
        {
          name: '数据统计',
          path: 'count',
          icon: req