Vue（四十二）、路由基本使用

一、单页面（SPA）应用理解

1、整个应用只有一个完整的页面，（index.html）

2、点击页面的导航链接不会刷新页面，只会做页面的局部更新

3、数据需要通过ajax请求获取

二、路由

（一）概念

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

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

（二）路由分类

1、后端路由

①value是function用于处理客户端提交的请求

②工作过程：服务器接受到一个请求，根据请求路径找到匹配的函数来处理请求，返回响应数据

2、前端路由

①value是component，用于展示页面内容

②工作过程：当浏览器的路径改变时，对应的组件就会显示

三、路由的使用

1、安装路由npm i vue-router@3 （vue2使用@3）

2、创建router文件夹及其下的index.js文件 

一般文件下的index.js 可以省略不写

3、在main.js 中配置

4、在App.vue中应用

router-link最终默认生成a标签

四、路由使用注意点

1、路由组件通常放在pages文件夹，一般组件通常放在components 文件夹

2、通过切换，“隐藏”了的路由组件默认是被销毁掉的，需要的时候再去挂载

3、每个组件都有自己的$route属性，里面存储这自己的路由信息

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

五、嵌套路由

1、准备好子组件

2、引入组件

3、配置路由

4、页面填充