目标: 了解hash改变, 如何显示不同的组件的过程

1.基本思路:

1. 用户点击了页面上的a链接

2. 导致了 URL 地址栏中的 Hash 值发生了变化

3. 前端js监听了到 Hash 地址的变化

4. 前端js把当前 Hash 地址对应的组件渲染都浏览器中

2.实现简单的前端路由:  

     1.src/views/创建并在App.vue里导入和注册组件

      MyHome.vue

      MyMovie.vue

      MyAbout.vue

<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通过动态组件, 控制要显示的组件

<template><div><h1>App组件</h1><component :is="comName"></component></div>
</template><script>
export default {// ...省略其他data () {return {comName: 'MyHome'}}
}
</script>

   3.声明三个导航链接, 点击时修改地址栏的 hash 值

<template><div><h1>App组件</h1><a href="#/home">首页</a>&nbsp;<a href="#/movie">电影</a>&nbsp;<a href="#/about">关于</a>&nbsp;<component :is="comName"></component></div>
</template>

  4.在 created 中, 监视地址栏 hash 时的变化, 一旦变化, 动态切换展示的组件

created () {window.onhashchange = () => {switch(location.hash) {case '#/home':this.comName = 'MyHome'breakcase '#/movie':this.comName = 'MyMovie'breakcase '#/about':this.comName = 'MyAbout'break}}
},

总结: 改变浏览器url的hash值, JS监听到hash值改变, 把对应的组件显示到同一个挂载点