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>