（六）vue-router+UI组件库

6.1 相关理解

6.1.1 vue-router 的理解

vue 的一个插件库，专门用来实现SPA 应用

6.1.2 对SPA 应用的理解

1. 单页Web 应用（single page web application，SPA）。

2. 整个应用只有一个完整的页面。

3. 点击页面中的导航链接不会刷新页面，只会做页面的局部更新。

4. 数据需要通过ajax 请求获取。

6.1.3 路由的理解

1. 什么是路由?

1. 一个路由就是一组映射关系（key - value）

2. key 为路径, value 可能是function 或component

2.路由分类

1. 后端路由：

(1) 理解：value 是function, 用于处理客户端提交的请求。

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

2. 前端路由：

(1) 理解：value 是component，用于展示页面内容。

(2) 工作过程：当浏览器的路径改变时, 对应的组件就会显示。

6.2 基本路由

6.2.1 效果

❣️❣️ vue2配合使用 npm i vue-router@3

6.2.2 总结: 编写使用路由的 3 步

1. 定义路由组件

2. 注册路由

3. 使用路由

👉路由

1. 理解：一个路由（route)就是一组映射关系
2. 前端路由：key是路径，value是组件

1.基本使用

​ 1.安装vue-router,命令npm i vue-router（现在默认下载路由为4只能在vue3中使用，vue2中需要使用router3)

​ 2.应用插件：Vue.use(VueRouter)

​ 3.编写router配置项

//该文件用于创建整个应用的路由器
//引入VueRouter
import VueRouter from 'vue-router'
//引入Layou组件
import About from '../components/About'
import Home from '../components/Home'

//创建并导出一个路由器
export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        }
    ]
})

4.实现切换（active-class可配置高亮样式）
<router-link class="list-group-item" active-class="active" to="/about">About</router-link>
5. 制定展示位置

<!-- 指定组件呈现的位置 -->
<router-view></router-view>

几个注意点：

1. 路由组件通常放在pages文件夹中，一般组件通常放在components文件夹。
2. 通过切换，“隐藏”了的路由组件，默认是被销毁的，需要的时候再去挂载。
3. 每个组件都有自己的$route属性，里面存储着自己的路由信息。
4. 整个应用只有一个router,可以通过组件的router属性获取。

6.3 嵌套（多级）路由

1. 配置路由规则，使用children配置项
2. 跳转（要写完整路径）
   

6.4 路由传参

6.5 编程式路由导航

1. this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
2. this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
3. this.$router.back(): 请求(返回)上一个记录路由
4. this.$router.go(-1): 请求(返回)上一个记录路由
5. this.$router.go(1): 请求下一个记录路由

路由的query参数

1. 传递参数
   
2. 接收参数
   
   
   
   
   
   

Vue UI 组件库

1. Vant https://youzan.github.io/vant

2. Cube UI https://didi.github.io/cube-ui

3. Mint UI http://mint-ui.github.io

7.2 PC 端常用UI 组件库

1. Element UI https://element.eleme.cn

2. IView UI [https://www.iviewui.com](