Vue学习笔记——vue-router

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.效果

Vue学习笔记——vue-router_第1张图片

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

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

6.3.嵌套(多级)路由

Vue学习笔记——vue-router_第2张图片

6.4.路由传参

Vue学习笔记——vue-router_第3张图片

6.5.编程时路由导航

Vue学习笔记——vue-router_第4张图片

相关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): 请求下一个记录路由

你可能感兴趣的:(#,Vue,前端,vue.js,学习,前端)