Vue路由初识

最后更新：2022-02-20 02:22:13 手机定位技术交流文章

主要介绍路由的理解和概念和Vue路由的基本使用和嵌套路由。

何为路由：路由的本质是一组组key-value的对应关系，多个路由由路由器管理。

在这里插入图片描述

编码世界中的路由主要分为两类：

Vue中的路由也是一组组key-value的对应规则，称为路由规则，由路由器统一管理。

在Vue中，路由的key是路径，value是component组件，也就是Vue中的路由器router会随时监测到页面路径的变化，然后会根据设置好的路由规则（route），展示不同的组件（value）。

在这里插入图片描述

生活中的路由和路由器主要是负责网络的分发和数据的发送，而Vue中的路由和路由器主要负责的功能是单页面应用（SPA）的路由跳转。

单页面应用（SPA — Single Page Web Application）：

也就是应用中由始至终都只有一个html页面，页面通常分为导航区和展示区，点击导航区会导致展示区的变动，实际来来回回也就只有一个页面。

比较典型的例子就是很多后台管理系统都很适合做成单页面应用。

现实中，美团生活的页面也是一个单页面应用。
https://gz.meituan.com/shenghuo/
在这里插入图片描述
总的来说：路由就是一组对应关系。

要在vue中实现路由，一个大前提是要按照vue的路由器 vue-router，是vue的一个插件库，专门用于实现SPA应用。

这里要说明的是，在2022年2月7日以后，vue-router的默认版本变成了4，之前是3，并且vue-router4只能在vue3中使用，而vue-router3可以在vue2中使用，如果强行把vue-router4安装在vue2中，会报如下错误。

在这里插入图片描述

所以2022年2月7日之后，vue2的项目安装vue-router需要指定vue-router的版本，最终过的命令是：

在这里插入图片描述
安装相关插件之后，就可以开始使用vue路由，
主要分为以下几步：

创建路由组件，也就是上图中的About.vue和Home.vue，通常路由组件创建在pages文件夹下，一般组件创建在components文件夹写。
About.vue:

Hom.vue

在这里插入图片描述
至此，vue路由的基本使用步骤已经完成，最后，看下单页面应用的单页面index.html

使用npm run serve进行启动项目，并访问：
在这里插入图片描述

最后，讲几个注意点：

路由组件通常放在pages文件夹下，一般组件通常放在components文件夹下。
通过导航链接进行路径的切换导致组件的切换，默认会导致组件的销毁和挂载，被切换的组件会销毁，切换的组件会挂载，比如上面例子，从About导航切换到Home导航后，About组件会被销毁，Home组件会被挂载。
验证：往两个组件分别添加mounted和destroyed生命周期函数。

效果：
每个组件都有自己的$route对象，代表这个组件的路由信息，所有组件共享一个$router对象。
验证：
分别在两个组件的mounted函数打印这个两个对象。

结果：

验证$route的唯一性和$router的共享性：
验证方式是，先在About组件中的mounted函数里面，把两个对象存一份到window对象里面，然后在Home组件的mounted里面直接比较。

效果：