vue 利用hash值实现刷新无跳转页面

//子组件一定要有name值
<template>
  <div>
    <ul>
      <li @click="aaa(i)" v-for="(v, i) in nav" :key="i">{{ v }}</li>
      <components :is="active"></components>
    </ul>
  </div>
</template>
<script>
import One from './One'
import Two from './Two'
import Three from './Three'
export default {
  mounted() {
    let str = window.location.hash
    this.active = str.replace('#', '')
  },
  data() {
    return {
      nav: ['one', 'two', 'three'],
      list: [One.name, Two.name, Three.name],
      active: 'One',
    }
  },
  components: {
    One,
    Two,
    Three,
  },
  methods: {
    aaa(i) {
      this.active = this.list[i]
      window.location.hash = this.list[i]
    },
  },
}
</script>