【Vue2.0】—vue-router(二十六)

简介: 【Vue2.0】—vue-router(二十六)


一、vue-router 的理解

它是vue 的一个插件库,专门用来实现 SPA 应用

二、对 SPA 应用的理

  1. 单页 Web 应用(single page web application,SPA)。
  2. 整个应用只有一个完整的页面。
  3. 点击页面中的导航链接不会刷新页面,只会做页面的局部更新。
  4. 数据需要通过 ajax 请求获取。

三、路由的理解

(一)、什么是路由?

1、一个路由就是一组映射关系(key - value)

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

(二)、路由的分类

后端路由

  1. 理解:value 是 function, 用于处理客户端提交的请求。
  2. 工作过程:服务器接收到一个请求时, 根据请求路径找到匹配的函数来处理请求, 返回响应数据。

前端路由

  1. 理解:value 是 component,用于展示页面内容。
  2. 工作过程:当浏览器的路径改变时, 对应的组件就会显示。

(三)、几个注意点

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

(四)、路由的基本使用

四、路由的嵌套(多级路由)

五、路由的query参数

六、路由的命名

作用:简化路由的跳转

如何使用:给路由命名

简化跳转

七、路由的params参数

配置路由,声明接收params参数


相关文章
|
JavaScript 前端开发
Vue系列教程(17)- 路由(vue-router)
Vue系列教程(17)- 路由(vue-router)
94 1
|
11月前
Uncaught runtime errors: × ERROR Cannot read properties of undefined (reading ‘ vue2&vue-router兼容性问题
Uncaught runtime errors: × ERROR Cannot read properties of undefined (reading ‘ vue2&vue-router兼容性问题
415 0
|
6月前
|
JavaScript 前端开发 API
vue、vuex、vue-router初学导航配合elementui及vscode快捷键
vue、vuex、vue-router初学导航配合elementui及vscode快捷键
250 0
|
6月前
|
JSON JavaScript 前端开发
IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向
IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向
225 0
|
11月前
|
缓存
【Vue2.0】—vue-router(二十七)
【Vue2.0】—vue-router(二十七)
|
JavaScript Go 网络架构
【vue入门手册】 九 、初识 vue-router
【vue入门手册】 九 、初识 vue-router
|
JavaScript 前端开发
Vue3引入vue-router路由并通过vue-wechat-title设置页面
对于用类似Vue前后端分离技术架构的单页应用页面之间的跳转没有非前后端分离那么来得直接,甚至连设置跳转页面的Title都要费一番周折,本文介绍Vue3引入vue-router路由并设置页面Title,通过vue-router实现页面的路由,通过vue-wechat-title来设置页面的title。
314 0
|
JavaScript API Go
Vue | Vue.js 全家桶 - Vue-Router详解(二)
Vue | Vue.js 全家桶 - Vue-Router详解(二)
|
移动开发 JavaScript 前端开发
Vue | Vue.js 全家桶 - Vue-Router详解(一)
Vue | Vue.js 全家桶 - Vue-Router详解(一)
|
JavaScript 网络架构
Vue 安装 Vue-router 路由安装以及使用
Vue 安装 Vue-router 路由安装以及使用
227 0