Vue2-VueRouter

单页应用程序: SPA - Single Page Application

所有功能在 一个html页面 上实现

具体示例: 网易云音乐 https://music.163.com/

路由

Vue中路由：路径和组的映射关系

通过改变#/来控制不同的页面

VueRouter 的 使用 (5 + 2)

5个基础步骤 (固定)

2个核心步骤

一.创建组件并配置规则

二.准备导航链接，配置路由出口

路由的封装抽离

将路由模块抽离出来。 好处：拆分模块，利于维护

绝对路径：@指代src目录，可以用于快速引入组件

导出路由模块

在main.js接收

声明式导航 

导航链接

 <router-link to=" 路径 "></router-link>

vue-router 提供了一个全局组件 router-link (取代 a 标签)

能跳转，配置 to 属性指定路径(必须) 。本质还是 a 标签 ，to 无需 # 

实现导航高亮效果

router-link 自动给当前导航添加了两个高亮类名

运用这两个类给其施加高亮效果

还可以自定义这两个类的名字

跳转传参

在跳转路由时, 进行传值

查询参数传参

语法格式如下

to="/path?参数名=值"

对应页面组件接收传递过来的值

$route.query.参数名

动态路由传参

动态路由参数-可选符

路由重定向

网页打开， url 默认是 / 路径，未匹配到组件时，会出现空白

重定向 → 匹配path后, 强制跳转path路径

语法： { path: 匹配路径, redirect: 重定向到的路径 }

Vue路由 - 404

当路径找不到匹配时，给个提示页面

位置：配在路由最后

语法：path: "*" (任意路径) – 前面不匹配就命中最后这个

Vue路由 - 模式设置

hash路由(默认) 例如: http://localhost:8080/#/home

history路由(常用) 例如: http://localhost:8080/home (以后上线需要服务器端支持)

编程式导航

用JS代码来进行跳转

path 路径跳转

path跳转传参方式

查询参数传参

动态路由传参

name 命名路由跳转

查询参数传参

动态路由传参

嵌套路由

有时候我们会需要嵌套多级路由

在一级路由组件中准备二级路由出口

 组件缓存 keep-alive

数据重新加载了希望回到原来的位置

路由跳转后，组件被销毁了，返回回来组件又被重建了，所以数据重新被加载了

可以利用 keep-alive 将组件缓存下来

keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。

keep-alive的三个属性

当我们不想所有组件都被缓存时可以修改keep-alive的属性

include ： 组件名数组，只有匹配的组件会被缓存

exclude ： 组件名数组，任何匹配的组件都不会被缓存

max ： 最多可以缓存多少组件实例

组件缓存后就不会执行组件的created, mounted, destroyed 等钩子了

所以其提供了actived 和 deactived钩子，帮我们实现缓存组件的业务需求。

在被缓存的组件中使用方法

activated 当组件被激活（使用）的时候触发 → 进入这个页面的时候触发

deactivated 当组件不被使用的时候触发 → 离开这个页面的时候触发