（六）vue-router+UI组件库
文章目录
- 6.1 相关理解
- 6.1.1 vue-router 的理解
- 6.1.2 对SPA 应用的理解
- 6.1.3 路由的理解
- 1. 什么是路由?
- 2.路由分类
- 6.2 基本路由
- 6.2.1 效果
- **6.2.2** **总结: 编写使用路由的** **3 步**
- 👉路由
- 6.3 嵌套（多级）路由
- 6.5 编程式路由导航
- Vue UI 组件库
- 7.2 PC 端常用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. 什么是路由?
-
一个路由就是一组映射关系（key - value）
-
key 为路径, value 可能是function 或component
2.路由分类
- 后端路由：
(1) 理解：value 是function, 用于处理客户端提交的请求。
(2) 工作过程：服务器接收到一个请求时, 根据请求路径找到匹配的函数来处理请求, 返回响应数据。
- 前端路由：
(1) 理解：value 是component，用于展示页面内容。
(2) 工作过程：当浏览器的路径改变时, 对应的组件就会显示。
6.2 基本路由
6.2.1 效果
❣️❣️ vue2配合使用 npm i vue-router@3
6.2.2 总结: 编写使用路由的 3 步
-
定义路由组件
-
注册路由
-
使用路由
👉路由
- 理解：一个路由（route)就是一组映射关系
- 前端路由：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>
几个注意点：
- 路由组件通常放在pages文件夹中，一般组件通常放在components文件夹。
- 通过切换，“隐藏”了的路由组件，默认是被销毁的，需要的时候再去挂载。
- 每个组件都有自己的$route属性，里面存储着自己的路由信息。
- 整个应用只有一个router,可以通过组件的router属性获取。
6.3 嵌套（多级）路由
- 配置路由规则，使用children配置项
- 跳转（要写完整路径）
6.4 路由传参
6.5 编程式路由导航
- this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
- this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
- this.$router.back(): 请求(返回)上一个记录路由
- this.$router.go(-1): 请求(返回)上一个记录路由
- this.$router.go(1): 请求下一个记录路由
路由的query参数
- 传递参数
- 接收参数
Vue UI 组件库
-
Vant https://youzan.github.io/vant
-
Cube UI https://didi.github.io/cube-ui
-
Mint UI http://mint-ui.github.io
7.2 PC 端常用UI 组件库
-
Element UI https://element.eleme.cn
-
IView UI [https://www.iviewui.com](