vue锚链接跳转

在vue中的锚链接和普通的html不同，关于vue中的锚链接可以参考vue 中的 scrollBehavior 滚动行为 链接地址：https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html#异步滚动

组件一

<template> <div class="hello"> <header> <div v-for="(item,index) in nav" :key='index' class="g-box" @mouseenter='enter(index)' @mouseleave='leave()'> <router-link :to="item.path"> {{item.name}} </router-link> <div class="hide" v-show="see&&index == current"> <p v-for="(it,index) in item.cli" :key='index'> <a :href="it.sid">{{it.title}}</a> </p> </div> </div> </header> </div> </template> <script> export default { name: 'HelloWorld', data() { return { nav: [{ name: '首页', path: '/' }, { name: '关于我们', path: '/about', cli: [{ title: '品牌历史', sid: '/about?#a' }, { title: '售后服务', sid: '/about?#b' }, { title: '关于我们', sid: '/about?#c' }] }], see: false, current: 0 } }, methods: { enter(index) { // alert(1) this.see = true this.current = index }, leave() { this.see = false this.current = null } } } </script>

组件二

template> <div class="page"> <div class="g-about-box" id="a"> <p>品牌历史</p> </div> <div class="g-about-box" id="b"> <p>售后服务</p> </div> <div class="g-about-box" id="c"> <p>关于我们</p> </div> </div> </template>

在router文件夹下的index.js添加以下内容

const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes, scrollBehavior(to,from,savedPosition) { if(to.hash){ return{ selector: to.hash } } } })

如有问题欢迎大家指正，一起学习。