前端vue路由的概念与原理

1. 什么是路由

路由（英文：router）就是对应关系。

2. SPA 与前端路由

SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。

此时，不同组件之间的切换需要通过前端路由来实现。

结论：在 SPA 项目中，不同功能之间的切换，要依赖于前端路由来完成！

3. 什么是前端路由

通俗易懂的概念：Hash 地址与组件之间的对应关系。

Hash地址就是在URL中从#开始到后面的地址就是Hash地址

例如：如下的#b4就是Hash地址（#一定要有，才是Hash地址）

4. 前端路由的工作方式

① 用户点击了页面上的路由链接

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

③ 前端路由监听了到 Hash 地址的变化

④ 前端路由把当前 Hash 地址对应的组件渲染浏览器中
在这里插入图片描述

5. 实现简易的前端路由

步骤1：通过标签，结合 comName 动态渲染组件。
步骤2：在 App.vue 组件中，为链接添加对应的 hash 值：
步骤3：在 created 生命周期函数中，监听浏览器地址栏中hash 地址的变化，动态切换要展示的组件的名称。

实例代码如下：

<template>
  <div class="app-container">
    <h1>App 根组件</h1>
 
    <a href="#/home">首页</a>
    <a href="#/movie">电影</a>
    <a href="#/about">关于</a>
    <hr />
 
    <component :is="comName"></component>
  </div>
</template>
 
<script>
// 导入组件
import Home from '@/components/Home.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'
 
export default {
    
    
  name: 'App',
  data() {
    
    
    return {
    
    
      // 在动态组件的位置，要展示的组件的名字，值必须是字符串
      comName: 'Home'
    }
  },
  created() {
    
    
    // 只要当前的 App 组件一被创建，就立即监听 window 对象的 onhashchange 事件
    window.onhashchange = () => {
    
    
      console.log('监听到了 hash 地址的变化', location.hash)
      switch (location.hash) {
    
    
        case '#/home':
          this.comName = 'Home'
          break
        case '#/movie':
          this.comName = 'Movie'
          break
        case '#/about':
          this.comName = 'About'
          break
      }
    }
  },
  // 注册组件
  components: {
    
    
    Home,
    Movie,
    About
  }
}
</script>
 
<style lang="less" scoped>
.app-container {
    
    
  background-color: #efefef;
  overflow: hidden;
  margin: 10px;
  padding: 15px;
  > a {
    
    
    margin-right: 10px;
  }
}
</style>