前端vue路由的概念与原理

目录

1. 什么是路由

2. SPA 与前端路由

3. 什么是前端路由

4. 前端路由的工作方式

5. 实现简易的前端路由 

 实例代码如下：

---

 

1. 什么是路由

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

2. SPA 与前端路由

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

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

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

3. 什么是前端路由

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

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

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

4. 前端路由的工作方式

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

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

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

④    前端路由把当前 Hash 地址对应的组件渲染都浏览器中

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

5. 实现简易的前端路由 

 步骤1：通过 <component> 标签，结合 comName 动态渲染组件。示例代码如下：

步骤2：在 App.vue 组件中，为 <a> 链接添加对应的 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>