非父子组件之间实现锚点功能

今天用vue写个人博客项目时遇到的一些问题

一、两个vue文件（非父子组件）之间实现锚点功能
问题描述：在一个VUE页面中，引入两个组件，A组件是头部的导航栏，B组件是展示的页面内容，我要通过A组件的一个按钮触发状态，然后B组件根据A组件触发的状态跳转到页面相应的位置， 一开始我想到的是用a标签的href属性来实现锚点的功能，但是使用a标签会导致页面刷新，并且URL栏会加上相应的锚点‘#id’。

解决方法：
2. 经过上网查找解决方案，并结合实际情况，使用localStorage来解决。
解决方案：
1). 首先在main.js中给Vue.prototype注册一个全局方法，然后创建一个 StorageEvent 方法，当执行localStorage.setItem(k, val) 的时候，初始化事件并派发事件。
StorageEvent：当前页面使用的storage被其他页面修改时触发；
createEvent(type)：这个方法返回一个新的DOM事件对象，事件类型为传入的type。

Vue.prototype.$addStorageEvent = function(key, data) {
  var newStorageEvent = document.createEvent('StorageEvent');
  const storage = {
      setItem: function (k, val) {
          localStorage.setItem(k, val);
          // 初始化创建的事件
          newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null);
          // 派发对象
          window.dispatchEvent(newStorageEvent);
      }
  }
  return storage.setItem(key, data);
} 

2）A组件的按钮触发的事件中进行缓存

	`this.$addStorageEvent("id", data);`

3. B组件中监听setItem

window.addEventListener('setItem', (e) => {
      // 状态改变后要进行的操作
      ...
    });

两个vue文件之间实现锚点的效果就实现了。