vue2中的Vue-router简单认识

Vue-router

[官网][https://router.vuejs.org/zh/]

一、路由基本概念

这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（single page application）的路径管理器。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。

传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系。

至于我们为啥不能用a标签，这是因为用Vue做的都是单页应用（当你的项目准备打包时，运行npm run build时，就会生成dist文件夹，这里面只有静态资源和一个index.html页面），所以你写的标签是不起作用的，你必须使用vue-router来进行管理。

1、路由理解

理解：一个路由（route）就是一组映射关系（key - val），多个路由需要由路由器（router）进行管理

前端路由：key是路径，val是组件

2、路由基本使用及注意点

注：2022.2.7以后，vue-router默认版本为4版本，vue-router4只能在vue3中使用；在vue2中需要使用vue-router3

1. 安装vue-router，npm i vue-router

2. 引入插件，import VueRouter form 'vue-router'**

3. 应用插件，Vue.use(VueRouter )**

4. 编写router配置项

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

6. 指定展示位置

注：路由组件一般存放在*pages*文件夹，一般组件存放在*components*文件夹

通过路由切换隐藏的路由，默认是被 销毁 的，激活的时候再去进行 挂载

二、嵌套（多级）路由

1. 配置路由规则，使用children配置项

2. 跳转（要写完整路径）

三、路由参数

1、query参数

1. 传递参数

2. 接收参数

2、params参数

1. 配置路由，声明接收params参数

2. 传递参数

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用 name 配置

3. 接收参数

四、命名路由

1、作用

? 简化路由的跳转

2、使用

1. 给路由命名

2. 简化跳转