Vue路由 - 工作原理(深入理解)

目标: 了解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'
        break
      case '#/movie':
        this.comName = 'MyMovie'
        break
      case '#/about':
        this.comName = 'MyAbout'
        break
    }
  }
},

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