前端路由的概念与原理
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>
<router-link to="/movie">电影</router-link>
<router-link to="/about">关于</router-link>
<!-- 声明路由的占位符 -->
<router-view></router-view>
</template>
2.4 创建路由模块
在项目中创建 router.js 路由模块,在其中按照如下 5 个步骤创建并得到