前端路由的概念与原理

前端路由的概念与原理

一.回顾后端路由

后端路由指的是：请求方式、请求地址与 function 处理函数之间的对应关系。在 node.js 中，express 路由的基本用法如下：

const express = require('express')
const router = express.Router()


router.get('/cates', (req, res) => {
    conn.query(`SELECT * FROM categories`, (err, result) => {
        if (err) return res.status(500).json({ status: 500, msg: "服务器错误" })
        res.status(200).json({
            "status": 0,
            "message": "获取文章分类列表成功！",
            "data": result
        })
    })
})

二.前端路由

SPA 与前端路由

SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。此时，不同组件之间的切换需要通过前端路由来实现
结论：在 SPA 项目中，不同功能(组件/页面)之间的切换，要依赖于前端路由来完成

什么是前端路由

Hash 地址与组件之间的映射关系，前端路由可以将hash地址和组件关联起来
Hash地址就可以先简单的理解为一个url地址
可以发现，不管是后台路由还是前端路由，都是一种映射关系

1. 后台路由是请求地址(方式)和处理函数之间的映射关系
2. 前端路由是hash地址和组件之间的映射关系

三.前端路由的工作方式

1. 用户点击了页面上的路由链接
2. 导致了 URL 地址栏中的 Hash 值发生了变化
3. 前端路由监听了到 Hash 地址的变化
4. 前端路由把当前 Hash 地址对应的组件渲染都浏览器中

结论：前端路由，指的是 Hash 地址与组件之间的对应关系

四.简易版路由实现

基本步骤

1. 创建三个组件用于测试about.vue , search.vue, mine.vue
2. 导入并注册这三个组件

   import about from "./about";
   import search from "./search";
   import mine from "./mine";
   

3. 添加动态组件，用于控制当前组件的显示 component
4. 添加三个超链接，注意设置href为锚链接
5. 为window添加onhashchange事件，监听hash值的变化

代码演示

<template>
  <div>
    <a href="#/about">关于</a>
    <a href="#/search">发现</a>
    <a href="#/mine">我的</a>
    <component :is="comName"> </component>
  </div>
</template>

<script>
import about from "./about";
import search from "./search";
import mine from "./mine";
export default {
  components: {
    about,
    search,
    mine,
  },
  data() {
    return {
      comName: "about",
    };
  },
  mounted() {
    window.onhashchange = () => {
      switch (location.hash) {
        case "#/about":
          this.comName = "about";
          break;
        case "#/search":
          this.comName = "search";
          break;
        case "#/mine":
          this.comName = "mine";
          break;
      }
    };
  },
};
</script>

<style>
</style>