【VUE2】第四期——路由
目录
1 路由的基本使用
1.1 5个固定步骤
1.2 2个核心步骤
2 声明式导航
2.1 基本使用
2.2 两个类名
2.3 自定义类名
2.4 传参
2.4.1 查询参数传参
2.4.2 动态路由传参
2.4.3 对比
2.4.4 动态路由参数的可选符
3 vue路由配置优化
3.1 重定向
3.2 404
3.3 模式设置
4 编程式导航
4.1 path路径跳转
4.1.1 query传参
4.1.2 动态路由传参
4.2 name命名路由跳转
4.2.1 query传参
4.2.2 动态路由传参
5 多级路由配置
6 额外优化功能点
6.1 点击回退跳转到上一页
6.2 详情页
6.3 缓存组件
6.3.1 语法
6.3.2 三个属性
6.3.3 两个生命周期钩子
1 路由的基本使用
官网：Vue Router
1.1 5个固定步骤
1.下载 VueRouter 模块到当前工程，版本3.6.5
（2,3,3 3,4,4）：（vue2的vuerouter版本为3.x，vuex的版本为3.x，vue3同理）
yarn add vue-router@3.6.52.main.js中引入VueRouter
import VueRouter from 'vue-router'3.安装注册
Vue.use(VueRouter)4.创建路由对象
const router = new VueRouter()5.注入，将路由对象注入到new Vue实例中，建立关联
new Vue({
render: h => h(App),
router:router
}).$mount('#app')1.2 2个核心步骤
1.创建需要的组件 (views目录)，配置路由规则
2.配置导航，配置路由出口(路径匹配的组件显示的位置)
App.vue
<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>2 声明式导航
2.1 基本使用
vue-router 提供了一个全局组件 router-link (取代 a 标签)
- 能跳转，配置 to 属性指定路径(必须) ，本质还是 a 标签 ，to 无需 #
- 能高亮，默认就会提供高亮类名，可以直接设置高亮样式
语法：
<router-link to="path的值">发现音乐</router-link>示例：
<div>
<div class="footer_wrap">
<router-link to="/find">发现音乐</router-link>
<router-link to="/my">我的音乐</router-link>
<router-link to="/friend">朋友</router-link>
</div>
<div class="top">
<!-- 路由出口 → 匹配的组件所展示的位置 -->
<router-view></router-view>
</div>
</div>使用router-link跳转后，我们发现：
当前点击的链接默认加了两个class的值
router-link-exact-active和router-link-active
我们可以给任意一个class属性添加高亮样式即可实现功能
2.2 两个类名
1.router-link-active
模糊匹配（用的多）
to="/my" 可以匹配 /my /my/a /my/b ....
2.router-link-exact-active
精确匹配
to="/my" 仅可以匹配 /my
即只有在路径单纯为/my（后面没东西了），才会自动为当前选中的a标签添加该类名，而上面那个类名则不受限
2.3 自定义类名
我们可以在创建路由对象时，通过额外配置两个配置项即可自定义2.2中的两个类名
const router = new VueRouter({
routes: [...],
linkActiveClass: "类名1",
linkExactActiveClass: "类名2"
})2.4 传参
2.4.1 查询参数传参
传参：
<router-link to="/path?参数名=值"></router-link>接收：
$router.query.参数名
注意：在template中可以直接用上述方法接收参数，如果在script的vue实例对象中，还需要加this
2.4.2 动态路由传参
传参：
第一步：在路径后面加 :参数名，如这里的:words
const router = new VueRouter({
routes: [
...,
{ path: '/search/:words', component: Search }
]
})第二步：直接在路径后面加 /参数值 ，如这里的apple
<router-link to="/path/apple"></router-link>接收：
$route.params.参数名
与上面同理
2.4.3 对比
查询参数传参 (比较适合传多个参数)
跳转：to="/path?参数名=值&参数名2=值"
获取：$route.query.参数名
动态路由传参 (优雅简洁，传单个参数比较方便)
配置动态路由：path: "/path/:参数名"
跳转：to="/path/参数值"
获取：$route.params.参数名
注意：动态路由也可以传多个参数，但一般只传一个
2.4.4 动态路由参数的可选符
/search/:words 表示必须要传参数。如果不传参数也希望匹配，可以加个可选符"？"
如：
const router = new VueRouter({
routes: [
...
{ path: '/search/:words?', component: Search }
]
})3 vue路由配置优化
3.1 重定向
网页打开时， url 默认是 / 路径，未匹配到组件时，会出现空白
重定向 → 匹配 / 后, 强制跳转 /home 路径
语法：
{ path: 匹配路径, redirect: 重定向到的路径 },
比如：
{ path:'/' ,redirect:'/home' }示例：
const router = new VueRouter({
routes: [
{ path: '/', redirect: '/home'},
...
]
})注意：/是根路径，是绝对路径
3.2 404
当路径找不到匹配时，给个提示页面
404的路由，虽然配置在任何一个位置都可以，但一般都配置在其他路由规则的最后面
语法：
path: "*" (任意路径) – 前面不匹配就命中最后这个
import NotFind from '@/views/NotFind'
const router = new VueRouter({
routes: [
...
{ path: '*', component: NotFind } //最后一个
]
})3.3 模式设置
路由的路径看起来不自然, 有#，能否切成真正路径形式?
hash路由(默认) 例如: http://localhost:8080/#/home
history路由(常用) 例如: http://localhost:8080/home (以后上线需要服务器端支持，开发环境webpack给规避掉了history模式的问题)
语法：
const router = new VueRouter({
mode:'histroy', //默认是hash
routes:[]
})4 编程式导航
4.1 path路径跳转
特点：简单
语法：
//简单写法
this.$router.push('路由路径')
//完整写法
this.$router.push({
path: '路由路径'
})4.1.1 query传参
语法：
//简单写法
this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')
//完整写法
this.$router.push({
path: '/路径',
query: {
参数名1: '参数值1',
参数名2: '参数值2'
}
})接收参数的方式依然是：$route.query.参数名
4.1.2 动态路由传参
语法：
//简单写法
this.$router.push('/路径/参数值')
//完整写法
this.$router.push({
path: '/路径/参数值'
})接收参数的方式依然是：$route.params.参数值
注意：
1.path不能配合params使用
2.使用此方法时，若配置路由的路径为xxx/:words?/:key，但只传一个值，会导致第二个值key为空，因为是按照顺序赋值的，所以必须要传words这个可选参数
4.2 name命名路由跳转
特点：适合 path 路径长的场景
语法：
1.路由规则，必须配置name配置项
{ name: '路由名', path: '/path/xxx', component: XXX },2.通过name来进行跳转
this.$router.push({
name: '路由名'
})4.2.1 query传参
this.$router.push({
name: '路由名字',
query: {
参数名1: '参数值1',
参数名2: '参数值2'
}
})4.2.2 动态路由传参
this.$router.push({
name: '路由名字',
params: {
参数名: '参数值',
}
})注意：如果有多个参数，就不用必须传可选参数的值了，因为可以指定参数
5 多级路由配置
此处用二级路由作演示，三级、四级、...、N级同理
步骤一：在一级路由下，配置children属性
示例：
const router = new VueRouter({
routes: [
{
path: '/',
component: Layout,
children:[
//children中的配置项 跟一级路由中的配置项一模一样
{path:'xxxx',component:xxxx.vue},
{path:'xxxx',component:xxxx.vue},
]
}
]
})注意:一级的路由path 需要加 / 二级路由的path不需要加 /
步骤二：配置二级路由的出口 <router-view></router-view>
<!--Layout.vue-->
<template>
<div class="h5-wrapper">
<div class="content">
<router-view></router-view>
</div>
....
</div>
</template>理解：<router-view></router-view>可以显示当前组件的一级子组件页面
6 额外优化功能点
6.1 点击回退跳转到上一页
语法：
$router.back()示例：
<template>
<div class="article-detail-page">
<nav class="nav"><span class="back" @click="$router.back()"><</span> 面经详情</nav>
....
</div>
</template>router与route的区分记忆：
router为路由器，身上挂载着跳转等方法，route是具体路由，身上挂载着数据
6.2 详情页
在详情页中，由于数据请求需要时间，存储数据的变量为空，会导致页面渲染错乱，因此在这段时间内不应该渲染框架，加上v-if进行判断
6.3 缓存组件
从首页列表点到详情页，又点返回，数据重新加载了 → 希望回到原来的位置
keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
6.3.1 语法
<template>
<div class="h5-wrapper">
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
</template>6.3.2 三个属性
① include ： 组件名数组，只有匹配的组件会被缓存
② exclude ： 组件名数组，任何匹配的组件都不会被缓存
③ max ： 最多可以缓存多少组件实例
6.3.3 两个生命周期钩子
keep-alive的使用会触发两个生命周期函数
activated 当组件被激活（使用）的时候触发 → 进入这个页面的时候触发
deactivated 当组件不被使用的时候触发 → 离开这个页面的时候触发
组件缓存后就不会执行组件的created, mounted, destroyed 等钩子了
所以其提供了actived 和deactived钩子，帮我们实现业务需求