zl程序教程

您现在的位置是:首页 >  前端

当前栏目

Vue学习笔记——vue-router

2023-09-14 09:15:02 时间

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.路由分类
后端路由:
理解:value是function,用于处理客户端提交的请求
工作过程:服务器接收到一个请求的时候,根据请求路径找到匹配的函数来处理请求,返回响应数据。
前端路由:
理解:value是component,用于展示页面内容。
工作过程:当浏览器的路径改变时,对应的组件就会显示。

6.2.基本路由

6.2.1.效果

在这里插入图片描述

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

  1. 定义路由组件
  2. 注册路由
  3. 使用路由

6.3.嵌套(多级)路由

在这里插入图片描述

6.4.路由传参

在这里插入图片描述

6.5.编程时路由导航

在这里插入图片描述

相关API:

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