Vue Router(一)

一、相关理解

定义: vue的一个插件库,专门用来实现SPA应用

SPA应用的理解

(1) 单页面应用 (single page web application)

(2) 整个应用只有一个完整的页面

(3) 点击页面中的导航链接不会刷新页面,只会做页面的局部更新

(4) 数据需要通过ajax请求获取

路由的理解:

定义:

(1) 一个路由就是一组映射关系

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

路由分类:

(1) 后端路由

1. 理解: value 是function, 用于处理客户端提交的请求

2. 工作过程: 服务器接收到一个请求时,根据请求路径找到匹配的函数来处理请求,返回响应数据

(2) 前端路由

1. 理解: value是component, 用于展示页面内容

2. 工作过程: 当浏览器的路径发生改变时,对应的组件就会展示

二、基本路由

理解: 一个路由(route)就是一组映射关系(key-value),多个路由需要路由器(router)进行管理

前端路由: key是路径,value是组件

(1) 基本使用

1. 安装vue-router, 命令行: npm i vue-router

2. 应用插件: Vue.use(VueRouter)

3. 编写router配置项

4. 实现切换(active-class可配置高亮样式)

<router-link active-class="active" to="/xxx"></router-link>

5. 指定展示位置

<router-view></router-view>

三、几个注意点

1. 路由组件通常存放在pages文件夹,一般组件通常存放在components文件夹

2. 通过切换, 隐藏了路由组件,默认是被销毁的,需要的时候再去挂在

3. 每个组件都有自己的$route属性, 里面存储着自己的路由信息

4. 整个应用只有一个router, 可以通过组件的$router属性获取到

四、嵌套路由

五、路由的query参数