路由初识
单页应用程序
# 单页应用程序（Single Page Application）
项目所有功能在一个 html 页面上实现
# 优点
- 页面按需更新，性能高
- 开发效率高
- 用户体验好
# 缺点
- 学习成本较高
- 首屏加载慢（可能一开始就要加载多个组件）
- 不利于SEO（搜索引擎难以抓取大部分页面内容）
什么是路由
路由模块拆分
路由：页面访问路径 和 组件 之间的映射关系
# 路由模块拆分后的基本结构
- `src/view/`：存放页面级别的组件，配合路由完成跳转
- `src/components/`：存放可复用的通用组件
- `src/router/index.js`：路由规则配置文件
在导入模块时可以使用 `@` 代替 `src` 目录，简化代码
VueRouter内置全局组件
Vue Router 是 Vue.js 的官方路由，它可以在页面地址改变时，动态切换页面上的组件
# <router-link> 路由导航
- 触发路由跳转，用来替换 a 链接
- 会自动转换为 `带有高亮类名` 的 a 链接，可以直接设置高亮样式
# <router-view> 路由出口
- 声明组件在页面模版中展示的位置
# <keep-alive> 缓存组件
- 被其包裹的组件在 `路由跳转时` 不会 `被销毁和重新创建`，组件中的生命周期函数不会被执行
- 一般用来缓存列表页，详情页不要用！
被其包裹的组件会多两个新的生命周期函数：
- `activated()` 组件激活时触发
- `deactivated()` 组件失活时触发
缓存组件上可设置一些属性：
- `include` 设置要缓存的组件
- `exclude` 设置不需要缓存的组件
- `max` 设置最多缓存组件的个数
路由基础示例
第一步 配置路由
# 安装 vue-router
npm i vue-router@3.6.5
// index.js
// 新建 src/router/index.js 文件，做一些路由相关配置
import Vue from 'vue'
import VueRouter from "vue-router";
import Home from '../views/Home'
// 注册路由组件
Vue.use(VueRouter);
// 实例化一个路由配置对象
const router = new VueRouter({
// 【核心】配置路由规则（路径和组件的映射关系）
// 当页面地址改变时，VueRouter 会监听到变化，然后在这里寻找要切换的组件
routes: [
{ path: "/home", component: Home },
],
});
// 导出路由实例
export default router
// main.js
// 在项目中注入路由实例
import router from './router/index'
new Vue({
router,
render: (h) => h(App),
}).$mount("#app");
第二步 使用路由
<!-- App.vue -->
<template>
<div class="main">
<div class="content">
<!-- 【核心】定义路由出口 -->
<router-view></router-view>
</div>
<div class="footer">
<!-- 点击时触发跳转，改变地址栏路径 -->
<router-link to="/home">首页</router-link>
</div>
</div>
</template>
路由配置
路由配置- 路由模式
const router = new VueRouter({
mode: 'history'
})
# hash路由（默认） http://localhost:8080/#/home
- 基于锚链接跳转实现
# history路由 http://localhost:8080/home
- 基于 H5 history API 实现
- 页面路径更好看，不过需要后端的支持
路由配置-重定向跳转和默认匹配
const router = new VueRouter({
routes: [
// 重定向跳转
{ path: "/", redirect: "/home" },
{ path: "/home", component: Home },
{ path: "/my", component: MyPage },
// 默认匹配：当上面定义的所有规则都匹配失败时，匹配成功
{ path: "*", component: NotFound },
],
})
路由配置-自定义高亮类名
const router = new VueRouter({
// 更改 <router-link> 上的高亮类名
// 自定义模糊匹配的高亮类名，链接地址和页面地址第一层匹配就会添加上
linkActiveClass: 'active',
// 自定义精确匹配的高亮类名，只有链接地址和页面地址完全一致时才会添加
linkExactActiveClass: 'exact-active',
})
路由深入
路由跳转传参
# 两种触发路由跳转的方式
## 声明式导航
- 在 html 中触发路由的跳转
- 通常是由 `<router-link>` 触发的
## 编程式导航
- 通过 js 代码控制路由的跳转
- this.$router.push(跳转地址)
# 两种路由传参方式
## 查询参数传参
- 获取参数 this.$route.query.参数名
## 动态路由传参（需配置动态路由）
- 获取参数 this.$route.params.参数名
> 共同组成了4中不同的路由跳转传参方式
# $router 路由实例对象
- 用来操作路由，完成页面间的跳转
- 跳转页面 this.$router.push()
- 返回上一个页面 this.$router.back()
# $route 当前页面的路由对象，封装了一些路由的信息
- 用来获取路由信息，如 params 参数、query 参数、path 路径
> $route 主要用于获取当前路由信息，$router 则是用于进行路由操作，例如跳转到指定的路由、前进、后退等
eg.声明式导航-查询参数传参
<router-link to="/search?key=前端">搜索</router-link>
// 获取参数
this.$route.query.key
eg.声明式导航-动态路由传参
routes: [
// 配置动态路由规则
{ path: '/search/:key', component: Search }
]
<router-link to="/search/前端">搜索</router-link>
// 获取参数
this.$route.params.key
eg.编程式导航-查询参数传参
this.$router.push('/search?key=前端')
this.$router.push({
path: '/search',
query: {
key: '前端'
}
})
// 获取参数
this.$route.query.key
eg.编程式导航-动态路由传参
routes: [
// 配置动态路由规则
{ path: '/search/:key', component: Search }
]
this.$router.push('/search/前端')
this.$router.push({
path: '/search/前端',
})
// 获取参数
this.$route.params.key
拓展-编程式导航的name路由跳转
# 编程式导航的两种路由跳转方式
- path路径跳转（常用）
- name命名路由跳转（需要在配置时单独给路由起名字）
routes: [
// 先给路由起一个名字
{ name: 'search', path: '/search/:key', component: Search }
]
this.$router.push({
name: 'search',
// 这里有区别，因为名字后不能直接拼接参数，需要给一个parms对象
params: {
key: '前端'
}
})
// 获取参数
this.$route.params.key
路由级别划分
一级路由：独立展示的页面。路由出口位置 App.vue
二级路由：某个页面依赖于其他页面结构。路由出口位置 xxx.vue
二级路由的路由规则
const router = new VueRouter({
routes: [
// 一级路由（首页）
{
path: '/',
component: Layout,
// 一级路由下的二级路由（列表页、收藏页、喜欢页、我的）
children: [
{ path: '/article', component: Article },
{ path: '/collect', component: Collect },
{ path: '/like', component: Like },
{ path: '/user', component: User }
]
}
]
})
