有时候需要跳转的目标页面需要有锚链接效果,有的时候需要根据参数跳转等,先上代码。组件里面的代码根据需求来就行,主要是对应跳转的目标页面
<template>
<ul class="header-nav">
<li class="menu-item" v-for="(item, index) in navList" :key="index" :class="{'active-nav':$route.name === item.name}" @click="handleNav(item)">
<h3>{{item.title}}</h3>
<div class="sub-nav-box" v-if="item.children">
<ul class="sub-nav">
<li v-for="(val, idx) in item.children" :key="idx" @click.stop="handleNavChildren(val)">
<span>{{ val.title }}</span>
</li>
</ul>
</div>
</li>
</ul>
</template>
<script>
export default {
name: "Nav",
data() {
return {
navList:[
{
title: '首页',
path: '/',
name: 'Index'
},
{
title: '品牌',
path: '/trademark',
name: 'Trademark',
children: [
{
id: 'module_1',
title: '品牌简介',
path: '/trademark',
name: 'Trademark'
},
{
id: 'module_2',
title: '品牌灵感',
path: '/trademark',
name: 'Trademark'
},
{
id: 'module_3',
title: '品牌文化',
path: '/trademark',
name: 'Trademark'
},
{
id: 'module_4',
title: '品牌关键词',
path: '/trademark',
name: 'Trademark'
},
]
},
{
title: '产品',
path: '/product',
name: 'Product',
children: [
{
id: 1,
title: '眼部护理',
path: '/product',
name: 'Product'
},
{
id: 2,
title: '面部护理',
path: '/product',
name: 'Product'
}
]
},
{
title: '动态',
path: '/dynamic',
name: 'Dynamic'
},
{
title: '社区',
path: '/communitySharing',
name: 'CommunitySharing',
children: [
{
id: 1,
title: '社区问答',
path: '/communitySharing/article',
name: 'Article',
}
]
}
]
};
},
mounted() {
},
methods: {
handleNav(item) {
this.$router.push({
path: item.path,
name: item.name
})
},
handleNavChildren(item) {
this.$router.push({
path: item.path,
name: item.name,
query: {
id: item.id
}
})
}
}
};
</script>
在对应跳转的目标页面做一个路由的监听即可(下面的例子是跳转到对应的锚链接上面)
<template>
<div>
<div class="container" id="module_1">锚链接模块1</div>
<div class="container" id="module_2">锚链接模块2</div>
<div class="container" id="module_3">锚链接模块3</div>
<div class="container" id="module_4">锚链接模块4</div>
</div>
</template>
<script>
export default {
data() {
return {}
},
watch:{
$route(to, from) {
let port = to.query.id
if(port) {
let selector = "#" + port;
this.jump(selector)
}
}
},
mounted() {
let port = this.$route.query.id;
if(port) {
let selector = "#" + port;
setTimeout(() => {
this.jump(selector)
},500)
}
},
methods: {
jump(selector) {
let anchor = this.$el.querySelector(selector);
anchor.scrollIntoView({ block: 'start', behavior: 'smooth' });
},
}
};
</script>
tips: 同理,在其他页面也是这样做,只不过有的是通过去路由参数而已。记录一下,防止下次用到。