带你了解vue中路由的工作原理

前端路由的本质, 对url的hash值进行改变和监听，切换对应页面组件的dom结构

根据地址栏变化（不重新向服务器发请求），去局部更新不同的页面内容，完成前端业务场景切换

原理分3个阶段

第一阶段: URL 地址栏中的 Hash 值发生了变化.

第二阶段: 前端js监听了到 Hash 地址的变化 window.onhashchange=()=>{}.

第三阶段: 前端js把当前 Hash 地址对应的组件渲染都浏览器中.

第一阶段: URL 地址栏中的 Hash 值发生了变化.

先搭一个基本的架子:

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

MyHome.vue
MyMovie.vue
MyAbout.vue

App.vue中的代码

<script>
import MyAbout from './views/my-about.vue'
import MyHome from './views/my-home.vue'
import MyMovie from './views/my-movie.vue'
export default {
  components: {
    MyHome,
    MyAbout,
    MyMovie
  }
}
</script>

我们可以通过a标签的href属性去改变url 的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>

第二阶段: 前端js监听了到 Hash 地址的变化 window.onhashchange=()=>{}.

注意此处不能使用function函数,箭头函数中的this指向当前的vue组件实例,function函数中的this指向window

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

第三阶段: 前端js把当前 Hash 地址对应的组件渲染都浏览器中.

<template>
  <div>
    <h1>App组件</h1>
    <component :is="comName"></component>
  </div>
</template>

<script>
export default {
  // ...省略其他
  data () {
    return {
      comName: 'MyHome'
    }
  }
}
</script>

总结

实现逻辑:先定义一个变量储存组件名,当点击a标签后,hash值发生改变,通过window.onhashchange监听hash的值,当hash的值为xxx时,变量名的值就赋值为对应显示的组件名,再通过动态组件component实现组件的切换.