Vue中使用路由

单页应用程序：SPA - Single Page Application
- 路由
VueRouter
- VueRouter使用步骤
- 组件存放目录问题
路由模块封装
声明式导航 - 导航连接
- 两个类名
- 自定义匹配类名
声明式导航 - 跳转传参
Vue路由 - 重定向
- Vue路由 - 404
- Vue路由 - 模式设置
编程式导航 - 基本跳转
编程式导航 - 路由传参
组件缓存 keep-alive
- 返回上一个组件

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

单页面应用(SPA)：所有功能都在一个html页面上实现。

开发分类	实现方式	页面性能	开发效率	用户体验	学习成本	首屏加载	SEO
单页	一个html页面	按需更新，性能高	高	非常好	高	慢	差
多页	多个html页面	整页更新，性能低	中等	一般	中等	快	优

应用场景：

单页面应用：系统类网站 / 内部网站 / 文档类网站 / 移动端站点
多页面应用：公司官网 / 电商类网站

单页面应用程序，之所以开发效率高，性能高，用户体验好，最大的原因就是：页面按需更新。

要按需更新，首先要明确：访问路径和组件的对应关系。

访问路径和组件的对应关系通过路由确定。

路由

路由就是一种映射关系。

生活中的路由：设备和ip的映射关系。

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

VueRouter

作用：修改地址栏路径时，切换显示匹配的组件。

说明：Vue官方的一个路由插件，是一个第三方包。

官网：http://v3.router.vuejs.org/zh/

VueRouter使用步骤

五个基础步骤（固定）：

下载：下载VueRouter模块到当前工程，版本3.6.5

yarn add vue-router@3.6.5
- Vue2 VueRouter3.x Vue3.x
- Vue3 VueRouter4.x Vue4.x
引入：

import VueRouter from 'vue-router'
安装注册：

Vue.use(VueRouter)
创建路由对象：

const router = new VueRouter()

注入，将路由对象注入到new Vue实例中，建立关联：

new Vue({
	render: h => h(App),
	router: router 
}).$mount('#app')

2个核心步骤：

创建需要的组件（views目录），配置路由规则：

import Find from './views/Find.vue'
import My from './views/My.vue'
import Friend from './views/Friend.vue'

const router = new VueRouter({
    routes: [
        { path: '/find', component: Find },
        { path: '/my', component: My },
        { path: '/friend', component: Friend },
    ]
})

配置导航，配置路由出口（路径匹配的组件显示的位置）：

<div class="footer_wrap">
    <a href="#/find">发现音乐</a>
    <a href="#/my">我的音乐</a>
    <a href="#/friend">朋友</a>
</div>
<div class="top">
    <router-view></router-view>
</div>

组件存放目录问题

.vue文件分两类——页面组件和复用组件，但本质无区别，分类是为了更容易维护。

src/views文件夹
- 页面组件 - 页面展示 - 配合路由用
src/components文件夹
- 复用组件 - 展示数据 - 常用于复用

路由模块封装

目标：将路由模块抽离出来。

好处：拆分模块，利于维护。

声明式导航 - 导航连接

需求：实现导航高亮效果。

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

能跳转，配置to属性指定路径（必须）。本质还是a标签，to无需 #
能高亮，默认就会提供高亮类名，可以直接设置高亮样式

两个类名

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

区别：

router-link-active 模糊匹配（用的多）
- to="/my"可以匹配 /my /my/a /my/b
router-link-exact-active 精确匹配
- to="/my"只可以匹配 /my

自定义匹配类名

router-link的两个高亮类名太长，我们可以自定义类名：

const router = new VueRouter({
    routes: [...],
    linkActiveclass: "类名1", // 配置模糊匹配的类名
    linkExactActiveClass: "类名2" // 配置精确匹配的类名
})

声明式导航 - 跳转传参

目标：在跳转路由时，进行传值。

查询参数传参（适合串多个参数）
- 语法格式：to="/path?参数名=值"
- 对应页面组件接收传递过来的值：$route.query.参数名

动态路由传参（穿单个参数方便）

配置动态路由

const router = new VueRouter({
    routes: {
        ...,
        {
       		path: '/search/:words', // 配置参数名
        	component: Search
    	}
    }
})

配置导航链接：to="/path/参数值"
对应页面组件接收传递过来的值：$route.params.参数名

问题：配了路由path: "/search/:words"为什么按下面步骤操作，会匹配到组件显示空白？

原因：/search/:words表示，必须要传参数。如果不传参数，也希望匹配，可以加个可选符 “?”，例如：/search/:words?

Vue路由 - 重定向

问题：网页打开，url默认是 / 路径，为匹配到组件时，会出现空白。

说明：重定向 —— 匹配path后，强制跳转path路径

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

const router = new VueRouter({
    routes: [
        { path: '/', redirect: '/home' },
        { path: '/home', component: Home },
        { path: '/search/:words', component: Search },
    ]
})

Vue路由 - 404

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

位置：配在路由最后

语法：path: "*"表示匹配任意路径 - 前面不匹配就命中最后这个。

Vue路由 - 模式设置

问题：路由的路径看起来不自然，有#，能否切成真正路径形式？

hash路由（默认）例如：http://localhost:8080/#/home
history路由（常用）例如：http://localhost:8080/home (以后上线需要服务端支持)
```
const router = new VueRouter({
    routes,
    mode: "history"
})
```

编程式导航 - 基本跳转

编程式导航：用JavaScript代码实现点击按钮跳转。

两种语法：

path路径跳转（简易方便）

this.$router.push('路由路径')
this.$router.push({
    path: '路由路径'
})

name命名路由跳转（适合path路径长的场景）

this.$router.push({
    name: '路由名'
})

{ name: '路由名', path: '/path/xxx', component: xxx }

编程式导航 - 路由传参

两种传参方式：查询参数+动态路由传参

两种跳转方式，对于两种传参方式都支持：

path路径跳转传参

query传参

this.$router.push('/路径?参数名1=参数值1&参数名2=参数值2')
this.$router.push({
    path: '/路径',
    query: {
        参数名1: '参数值1',
        参数名2: '参数值2',
    }
})

动态路由传参（需要配置动态路由）

this.$router.push('/路径/参数值')
this.$router.push({
    path: '/路径/参数值',
    query: {
        参数名: 参数值,
    }
})

name命名路由跳转传参

query传参

this.$router.push({
    name: '路由名字',
    params: {
        参数名: 参数值,
    }
})

动态路由传参

this.$router.push({
    name: 'search',
    params: {
        words: this.inpValue
    }
})

组件缓存 keep-alive

问题：从面经页点到详情页，又点返回，数据重新加载了，但我希望能回到原来的位置。

原因：路由加载，组件被销毁了，返回回来组件又被重建了，所以数据重新被加载。

keep-alive是什么：

keep-alive是Vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

keep-alive是一个抽象组件：它自身不会渲染成一个DOM元素，也不会出现在父组件链中。

keep-alive的优点：

在组件切换过程中把切换出去的组件保留在内存中，放置重复渲染DOM，减少加载时间及性能消耗。

<template>
	<div class="h5-wrapper">
        <keep-alive>
            <router-view></router-view>
    	</keep-alive>
    </div>
</template>

问题：缓存了所有被切换的组件

keep-alive的三个属性：

include：组件名数组，只有匹配的组件会被缓存
exclude：组件名数组，任何匹配的组件都不会被缓存
max：最多可以缓存多少组件实例

keep-alive的使用会触发两个生命周期函数（了解）

activated当组件被激活（使用）的时候触发 —— 进入页面触发
deactivated当组件不被使用的时候触发 —— 离开页面触发

返回上一个组件

语法：$router.back()

作用：返回上一个组件。

秒客网