vue项目中使用公共自定义导航组件需要跳转对应页面并且目标页面的效果可能会不同

有时候需要跳转的目标页面需要有锚链接效果，有的时候需要根据参数跳转等，先上代码。组件里面的代码根据需求来就行，主要是对应跳转的目标页面

<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;
	      // 页面还在渲染, 不能使用scrollIntoView(), 所以设置延时等渲染完成
	      setTimeout(() => {
	        this.jump(selector)
	      },500)
	    }
	  },
	  methods: {
	    // 锚链接跳转
	    jump(selector) {
	      let anchor = this.$el.querySelector(selector);
	      anchor.scrollIntoView({ block: 'start', behavior: 'smooth' });
	    },
	  }
	};
</script>

tips: 同理，在其他页面也是这样做，只不过有的是通过去路由参数而已。记录一下，防止下次用到。