Vue学习笔记——vue-router
2023-09-14 09:15:02 时间
6.1.相关理解
6.1.1.vue-router的理解
vue的一个插件库,专门用来实现SPA应用
6.1.2.对SPA应用的理解
- 但也Web应用(single page web application,SPA)
- 整个应用只有一个完整的页面
- 点击页面中的导航链接不会刷新页面,只会做页面的局部更新
- 数据需要通过ajax请求获取。
6.1.3.路由的理解
1.什么是路由?
一个路由就是一组映射关系(key-value)
key为路径,value可能是function或component
2.路由分类
后端路由:
理解:value是function,用于处理客户端提交的请求
工作过程:服务器接收到一个请求的时候,根据请求路径找到匹配的函数来处理请求,返回响应数据。
前端路由:
理解:value是component,用于展示页面内容。
工作过程:当浏览器的路径改变时,对应的组件就会显示。
6.2.基本路由
6.2.1.效果
6.2.2.总结:编写使用路由的3步
- 定义路由组件
- 注册路由
- 使用路由
6.3.嵌套(多级)路由
6.4.路由传参
6.5.编程时路由导航
相关API:
- this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
- this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
- this.$router.back(): 请求(返回)上一个记录路由
- this.$router.go(-1): 请求(返回)上一个记录路由
- this.$router.go(1): 请求下一个记录路由
相关文章
- Vue笔记:封装Echarts
- Vue_(Router路由)-vue-router路由的基本用法
- Vue_(组件)过渡效果
- [Vue @Component] Load Vue Async Components
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
- [Vue] Get up and running with vue-router
- 在vue中使用jsx语法
- npm install vue@next安装最新vue版本
- vue学习笔记
- vue - 指令创建 vue工程
- Vue——表单输入绑定
- Vue中vue-i18n结合element-ui实现国际化
- 测试开发之Vue学习笔记-Vue基础
- 测试开发之Vue学习笔记-Vue路由
- Vue(一)vue 概述与用法、MVVM、绑定语法、vue 指令
- 【vue】vue中如何实现SPA 单页面应用_09
- VUE学习笔记详细
- Vue: vue-router路由
- Vue学习笔记——Vue UI组件库
- Vue学习笔记——使用Vue脚手架
- Vue学习笔记——Vue组件化编程
- vue卫星应用示例从0到1部署运行环境