Vue3-路由

前端路由的概念与原理

1. 何为路由

    路由（router）就是对应关系。路由分为两大类：前端路由 和 后端路由。

2. 后端路由

    后端路由指的是：请求方式、请求地址与 function 处理函数之间的对应关系。

3. SPA 与前端路由

    SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。 此时，不同组件之间的切换需要通过前端路由来实现。

4. 何为前端路由

    简单来说就是：Hash 地址与组件之间的对应关系。

5. 前端路由的工作方式

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

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

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

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

vue-router 的基本使用

1. 何为  vue-router

    vue-router 是 vue.js 官方给出的路由解决方案。

    它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目 中组件的切换。

2. vue-router 4.x 的基本使用步骤

    ① 在项目中安装 vue-router

    ② 定义路由组件

    ③ 声明路由链接和占位符

    ④ 创建路由模块

    ⑤ 导入并挂载路由模块

2.1 如何在项目中安装 vue-router

    安装的命令如下：

npm install vue-router@next -S

2.2 定义路由组件

    在项目中定义我们所需要的组件，将来要使用 vue-router 来控制它们 的展示与切换

2.3 声明路由链接和占位符

    可以使用 <router-link> 标签来声明路由链接，并使用 <router-view> 标签来声明路由占位符。示例代码如下：

<template>
    <h1>App 组件</h1>
    <!-- 声明路由链接 -->
    <router-link to="/home">首页</router-link>&nbsp;
    <router-link to="/movie">电影</router-link>&nbsp;
    <router-link to="/about">关于</router-link>
    
    <!-- 声明路由的占位符 -->
    <router-view></router-view>
</template>

2.4 创建路由模块

    在项目中创建 router.js 路由模块，在其中按照如下 5 个步骤创建并得到路由的实例对象&#