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

  2通过动态组件, 控制要显示的组件



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

  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值改变, 把对应的组件显示到同一个挂载点

你可能感兴趣的:(大前端,javascript,前端,vue.js,vue,前端框架)