路由跳转传参或携带id和name值 & 实现title的hover变蓝效果

路由跳转传参或携带id和name值 & 实现title的hover变蓝效果

一、路由跳转传参或携带id和name值

1、第一种写法

结构

<div class="p-aq" @click="openCommon(item_q.item)">
    <span>{{item_q.item.question}}</span>
</div>


created() {
    // 获取问题详情数据
    this.getDeta()
},

方法

openCommon(item) {
    this.$router.push({ path: '/common', query: { id: item.id } })
},

2、第二种写法

结构

<div
     class="a-count"
     v-for="(item,index) in detaList.related_interpretation"
     :key="index"
     @click="openExplain(item.id)"
     :class="{'active-bg':curBg===index}"
     @mouseover="curBg=index"
     >{{item.title}}</div>
</div>

方法

// 打开具体内容
openExplain(id) {
    this.$router.push({ path: '/explain', query: { id: id } })
},
    
     // get请求 get('地址'，'{params:数据}')
    async getDeta() {
      let res = await this.$http.get('/FAQ/detail', {
        id: this.$route.query.id,
      })

      if (res.code != 200) {
        this.$router.push('/404')
      } else {
        this.detaList = res.result
      }
    },

二、实现title的hover变蓝效果

data(){
    return{
      curBg: -1, 
           // 问题详情
      // contact: [],
      detaList: {
        related_interpretation: [],
        related_question: [],
        related_law: [],
      },
    }
}

样式

// 滑动变色
.active-bg {
  &:hover {
    color: #0084ff;
  }
}

第一种写法样式

.p-aq {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    // height: 28px;
    font-size: 18px;
    color: #333333;
    font-weight: bold;
    line-height: 28px;
    span {
        cursor: pointer; /*鼠标悬停变小手*/
    }
    span:hover {
        color: #1890ff;  /*hover变蓝*/
    }
}

第二种写法样式

.p-aq {
    height: 22px;
    font-size: 16px;
    color: #333333;
    // font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    span {
        cursor: pointer; /*鼠标悬停变小手*/
    }
}

附

图例

<div class="a">
    <div class="a-a">
        <div class="a-tit">相关解读</div>
        <div class="a-count-no" v-if="detaList.related_interpretation=='-'">
            <p>暂无相关解读</p>
        </div>
        <div v-else>
            <div
                 class="a-count"
                 v-for="(item,index) in detaList.related_interpretation"
                 :key="index"
                 @click="openExplain(item.id)"
                 >{{item.title}}</div>
        </div>
    </div>
</div>

样式

.a {
    // height: 178px;
    padding: 16px 20px 4px 20px;
    background: #ffffff;
    border-radius: 4px;
    .a-tit {
        font-size: 18px;
        color: rgba(0, 0, 0, 0.85);
        line-height: 22px;
        font-weight: bold;
        margin-bottom: 16px;
    }
    .a-count {
        font-size: 16px;
        color: #555555;
        line-height: 22px;
        margin-bottom: 16px;
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; // 控制多行的行数
        -webkit-box-orient: vertical;
    }
    .a-count-no {
        font-size: 16px;
        color: #555555;
        line-height: 22px;
        margin-bottom: 16px;
    }
    .a-count:hover {
        color: #0084ff;
    }
}