目标: 了解hash改变, 如何显示不同的组件的过程
1.基本思路:
2.实现简单的前端路由:
1.src/views/创建并在App.vue里导入和注册组件
MyHome.vue
MyMovie.vue
MyAbout.vue
javascript"><script>
import MyHome from '@/views/MyHome.vue'
import MyMovie from '@/views/MyMovie.vue'
import MyAbout from '@/views/MyAbout.vue'
export default {
components: {
MyHome,
MyMovie,
MyAbout,
}
}
</script>
2通过动态组件, 控制要显示的组件
javascript"><template>
<div>
<h1>App组件</h1>
<component :is="comName"></component>
</div>
</template>
<script>
export default {
// ...省略其他
data () {
return {
comName: 'MyHome'
}
}
}
</script>
3.声明三个导航链接, 点击时修改地址栏的 hash 值
javascript"><template>
<div>
<h1>App组件</h1>
<a href="#/home">首页</a>
<a href="#/movie">电影</a>
<a href="#/about">关于</a>
<component :is="comName"></component>
</div>
</template>
4.在 created 中, 监视地址栏 hash 时的变化, 一旦变化, 动态切换展示的组件
javascript">created () {
window.onhashchange = () => {
switch(location.hash) {
case '#/home':
this.comName = 'MyHome'
break
case '#/movie':
this.comName = 'MyMovie'
break
case '#/about':
this.comName = 'MyAbout'
break
}
}
},
总结: 改变浏览器url的hash值, JS监听到hash值改变, 把对应的组件显示到同一个挂载点