Vue学习笔记(三) 路由+axios

思维导图

1.路由的概念与原理

1.1 什么是路由

• 理解：一个路由（route）就是一组映射关系（key - value），key 为路径, value 可能是 function 或 component，多个路由需要路由器（router）进行管理。
• 路由分为两大类：
  ① 后端路由：value 是 function, 用于处理客户端提交的请求
  ② 前端路由：value 是 component，用于展示页面内容。

1.1.1 前端路由

通俗易懂的概念：Hash 地址与组件之间的对应关系。Hash地址就是<a>标签的锚点链接
工作过程：当浏览器的路径改变时, 对应的组件就会显示。

1.1.2 后端路由

工作过程：服务器接收到一个请求时, 根据请求路径找到匹配的函数来处理请求, 返回响应数据。

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

const express = require('express');
const router = express.Router();
router.get('/userlist',function(req,res){
    /* 路由的处理函数*/});
router.post('/userlist',function(req,res){
    /* 路由的处理函数*/});
module.export = router;

1.2 SPA 与前端路由

• SPA（single page web application) 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。点击页面中的导航链接不会刷新页面，只会做页面的局部更新，数据需要通过 ajax 请求获取。
• 在 SPA 的项目中，不同功能之间的切换，要依赖于前端路由来完成！

1.3 前端路由的工作方式

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

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

1.4 实现简易的前端路由

步骤1：导入并注册 Home、Movie、About 三个组件
步骤2：通过 <component> 标签 is 属性，动态切换要显示的组件。
步骤3：在 App.vue 组件中，为 <a> 链接添加对应的 hash 值
步骤4：在 created 生命周期函数中，监听浏览器地址栏中 hash 地址的变化，动态切换要展示的组件的名称

<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <!-- 为a标签添加对应的hash值 -->
    <a href="#">首页</a>
    <a href="#">电影</a>
    <a href="#">关于</a>
    <!-- 2.1 通过 is 属性，指定要展示的组件的名称 -->
    <component :is="comName"></component>
    <hr />
  </div>
</template>

<script>
// 1.1 导入并注册 Home、Movie、About 三个组件
import Home from "@/components/Home.vue";
import Movie from "@/components/Movie.vue";
import About from "@/components/About.vue";

export default {
   
  name: "App",
  data() {
   
    return {
   
      // 2.2 要展示的组件名称，值必须为字符串
      comName: "Home",
    };
  },
  // 1.2 注册组件
  components: {
   
    Home,
    Movie,
    About,
  },
  created() {
   
    // 当前App组件一被创建，就立即监听window对象的onhashchange事件
    window.onhashchange = () => {
   
      // URL中#后面的部分改变时就会触发hashchange事件
      switch (
        location.hash // 通过location.hash 拿到#即后面的URL片段内容
      ) {
   
        case "#/home":
          this.comName = "Home";
          break;
        case "#/movie":
          this.comName = "Movie";
          break;
        case "#/about":
          this.comName = "About";
          break;
      }
    };
  },
};
</script>

2. vue-router 的基本使用

2.1 什么是 vue-router

• ue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。
• vue-router 的官方文档地址：https://router.vuejs.org/zh/

2.2 vue-router 安装和配置的步骤

① 安装 vue-router 包
② 创建路由模块
③ 导入并挂载路由模块
④ 声明路由链接和占位符

2.2.1 在项目中安装 vue-router

在 vue2 的项目中，安装 vue-router 的命令如下：

npm i vue-router@3.5.2 -S

注意：vue3中用vue-router 4x，vue2中用vue-router 3x

2.2.2 创建路由模块

在 src 源代码目录下，新建 router/index.js 路由模块，并初始化如下的代码：

// src/router/index.js 就是当前项目的路由模块
// 1. 导入Vue 和 VueRouter的包
import Vue from "vue";
import VueRouter from "vue-router";
// 2.调用 Vue.use()函数，把VueRouter安装为Vue项目的插件
// Vue.use()函数的作用，就是用来安装插件的
Vue.use(VueRouter);
// 3. 创建路由的实例对象
const router = new VueRouter();
// 4. 向外共享路由的实例对象
export default router;

2.2.3 导入并挂载路由模块

在 src/main.js 入口文件中，导入并挂载路由模块。示例代码如下：

import Vue from "vue";
import App from "./App.vue";
// 导入路由模块，目的是拿到路由的实例对象
// 在进行模块化导入的时候，如果给定的是文件夹，则默认导入这个文件夹下的index.js文件
// import router from "@/router/index.js";
import router from '@/router';
new Vue({
   
  render: (h) => h(App),
  // 在Vue项目中，要把路由用起来，必须把路由实例对象，通过下面的方式进行挂载
  // router: 路由的实例对象
  // router: router,
  //在ES6中，若对象属性名和本地变量名相同时，赋值可以省略冒号和值，直接写属性
  router,
}).$mount("#app");

2.2.4 声明路由链接和占位符

在 src/App.vue 组件中，使用 vue-router 提供的 <router-link> 和 <router-view> 声明路由链接和占位符：

<template>
  <div class="app-container">
    <h1>App2 组件</h1>
    <!-- 1. 定义路由链接 -->
    <a href="#/home"></a>
    <a href="#/movie"></a>
    <a href="#/about"></a>
    <hr />
    <!-- 2. 定义路由的占位符 -->
    <!-- 只要在项目中安装和配置了vue-router，就可以使用 router-view 组件了 -->
    <!-- 它的作用就是占位符 -->
    <router-view></router-view>
  </div>
</template>

把<a>链接改为<router-link>，to属性相当于href，但to的属性值省去了#，

<template>
  <div class="app-container">
    <h1>App2 组件</h1>
    <!-- 1. 定义路由链接 -->
    <!-- 当安装和配置了vue-router后，就可以使用router-link来代替普通的a链接-->
    <router-link to="/home"></router-link>
    <router-link to="/movie"></router-link>
    <router-link to="/about"></router-link>
    <hr />
    <!-- 2. 定义路由的占位符 -->
    <!-- 只要在项目中安装和配置了vue-router，就可以使用 router-view 组件了 -->
    <!-- 它的作用就是占位符 -->
    <router-view></router-view>
  </div>
</template>

2.2.5 声明路由的匹配规则

在 src/router/index.js 路由模块中，通过 routes 数组声明路由的匹配规则。示例代码如下：

import Vue from "vue";
import VueRouter from "vue-router";
// 2. 导入需要使用路由切换展示的组件
import Home from "@/components/Home.vue";
import Movie from "@/components/Movie.vue";
import About from "@/components/About.vue";
Vue.use(VueRouter);
// 2. 创建路由的实例对象，并传入参数
const router = new VueRouter({
   
  // routes 是一个数组，用来定义 “hash”与“组件”之间的对应关系
  // path表示要匹配的hash地址，这里不带#；component表示要展示的路由组件
  routes: