跨页面锚点跳转
- 首页
跳转到搜索页
一. 首页
- 通过路由跳转
query:{
id:id
}
handleClick(){
this.$router.push({
path:'/search',
query:this.query
})
}
二. 搜索页
- 处理
<template>
<div>
<div class="industry_area">
<div class="industry_single" v-for="(menu, index) in industryList" :key="index"
@click="handleClick(menu.id)">
<div :id="`id${menu.id}`" class="industry_title "
:class="activeIndustryId == menu.id ? 'industry_active' : ''">
{{
menu.dictValue
}}
</div>
<div :id="`id${menuChild.id}`" class="industry_child"
:class="activeIndustryId == menuChild.id ? 'industry_active' : ''" v-if="menu.children.length > 0"
v-for="(menuChild, index) in menu.children" :key="index" @click.stop="handleClick(menuChild.id, 2)">
<span>{{ menuChild.dictValue }}</span>
</div>
</div>
</div>
</div>
</template>
<script>
import { getTree} from '@/api/xxx'
export default {
data() {
return {
industryList: [],
activeIndustryId :'' // 当前选中项
}
},
mounted() {
this.fetchData()
},
methods: {
/**
* 获取行业列表数据
*/
fetchData() {
getTree('industry').then(res => {
this.industryList = res.data
if (res.code == 200 && this.activeIndustryId != "") {
this.$nextTick(() => {
this.anchorScrollIntoTarget()
})
}
})
},
/**
* 根据行业id获取文档列表
* @param {Int} id
*/
handleClick(id, level) {
this.activeIndustryId = id
this.$emit('handleClickSearch', id, level)
},
/**
* 锚点跳转
*/
anchorScrollIntoTarget() {
document.querySelector(`#id${this.activeIndustryId}`).scrollIntoView({
behavior: 'smooth',
block: 'center'
})
}
}
}
</script>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/194970.html
