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

2024-01-08 12:53:59

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

文章来源:https://blog.csdn.net/lin85253788/article/details/135452842
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。