话不多说，直接进入正题
前端路由
一个路由（route）就是一组映射关系（key（路径）-value（组件）），路由器（router）管理多个路由。
路由的使用(本文使用npm包管理器)
（1）运行npm i vue-router，安装vue-router
（2）新建src/router/index.js
（3）在index.js中书写以下代码：
import Vue from 'vue' //导入vue
import VueRouter from 'vue-router' //导入vue-router
vue.use(VueRouter) //注册vue-router
const routes = [
{
// name: 'home', 命名路由为home
path: '/',
component: ()=> import(@/views/Home.vue) //这是路由懒加载的方式书写,@表示当前src路径
children:[ //通过children配置子级路由
{
name:'users',
path:'users', //注意：此处一定不要写：/users，既二级及以下路由路径不要加'/'
component:()=> import(@/views/Users.vue)，
meta：{isAuth：true} //配置路由元信息
},
{
name:'goods',
path:'goods/:id/:goodname',//此处一定不要写：/goods，既二级及以下路由路径不要加'/';使用占位符id/goodname接收params参数
component:()=> import(@/views/Goods.vue)
//第一种写法：props值为对象，该对象中所有的key-value的最后都将通过props传给goods组件，在goods组件中通过props：['a']接收
// props:{a:900}
//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给goods组件,在goods组件中通过props：['a'，'b']接收params参数
// props:true
//第三种写法：props值为函数，该函数返回的对象中每一组key-value都将通过props传给goods组件，在goods组件中通过props：['a'，'b']接收
//props($route){return {
//a: route.query.a,
//b: route.query.b}}
}
]
}，
{
// name: 'welcome', 命名路由为welcome
path： '/welcome',
component: ()=> import(@/views/Home.vue)
}
]
const router = new VueRouter（{
mode：'hash' //路由器默认工作模式为hash，可改为history
routes
}）
export default router
（4）在src/main.js中书写以下代码：
import router from './router' //导入时会自动查找index.文件
new Vue（{
//省略其他代码...
router,
}）
(5)实现切换
<router-link active-class="active" to="home"> Home </router-link> //active-class可配置自定义样式；to是要去往的路径，如果是二级及以下路由需写to="/home/users（完整路径）"或to="{name:users}(这个users是通过name命名的)"
补充：
（1）浏览器有两种历史记录写入方式push（push为默认方式，追加历史记录，点击前进和后退可以返回或前进一个页面），replace（替换当前页面，无法返回上一个页面）
（2）开启replace模式： `<router-link replace ...> </router-link>`
（6）指定展示位置
<router-view> </router-view>
补充：
1.路由组件放在views/pages文件夹，一般组件放在components文件夹中
2.点击切换后，前一个路由组件是被销毁了，不是被隐藏（通过`<keep-alive includes="xxx">...</keep-alive>`让不展示的路由组件不被销毁,includes用来指定不被销毁的路由组件）
3.当前组件的路由信息储存在\$route 中，不同组件的\$route储存信息不一致
4.router一个应用只有一个，管理所有路由，可通过\$router获取其属性
路由传递参数
query参数
(1)传递参数
//字符串方法
<router-link :to="/welcome?title=你好&username=reader">Welcome</router-link>
//对象写法
<router-link :to="{
path：'/welcome',
query:{
title:'你好'，
username：'reader'
}
}">Welcome</router-link>
（2）接收参数
$route.query.title
$route.query.username
params参数
(1)传递参数
//字符串方法
<router-link :to="/welcome/1/笔记本电脑">Welcome</router-link>
//对象方法
<router-link :to="{
name:'goods', //注：params只能配合name，不能和path一起使用，原因是会出现路径问题
params:{
id:1,
goodname:'笔记本电脑'
}
}">Welcome</router-link>
（2）接收参数
$route.params.id
$route.params.goodname
编程式导航
作用：不借助router-link实现路由跳转，使路由跳转更加灵活
this.$router.push({
name:'goods',
params:{
id:1,
goodname:'笔记本电脑'
}
})
this.$router.replace({ //此方法会替换原来的历史记录，无法实现后退
name:'goods',
params:{
id:1,
goodname:'笔记本电脑'
}
})
this.$router.forword() //前进一步
this.$router.back() //后退一步
this.$router.go(number) //number为负数，后退number步；number为正数，前进number步
路由守卫
全局守卫
（1）全局前置守卫（初始化时执行，每次路由跳转前执行）
router.beforeEach((to,from,next)=>{
//省略其他代码...
//to是要去往的路由组件对象
//from是从哪里来的路由组件对象
next() //放行，必须要有，否则路由无法跳转
})
（2）全局后置守卫（初始化时执行，每次路由跳转后执行）
router.afterEach((to,from,next)=>{
//省略其他代码...
//to是要去往的路由组件对象
//from是从哪里来的路由组件对象
})
独享守卫
配置在需要进行鉴权的路由内：
beforeEnter：（to,from,next）=>{
//省略其他代码...
next() //放行，必须要有，否则路由无法跳转
}
组件内守卫（注：必须是通过路由规则进入该组件才能够生效）
配置在需要进行鉴权的组件内：
（1）进入组件时被调用
beforeRouteEnter：（to,from,next）=>{
//省略其他代码...
next() //放行，必须要有，否则路由无法跳转
}
（1）离开组件时被调用
beforeRouteLeave：（to,from,next）=>{
//省略其他代码...
next() //放行，必须要有，否则路由无法跳转
}
路由的两种模式
hash模式
例：http://localhost:8080/#/home/users
#及其后面的内容就是hash值，hash值不会包含在http请求中传给服务器，兼容性好，但App校验严格会被标记地址不合法
history模式
例：http://localhost:8080/home/users
兼容性较差，打包上线时会出现刷新404错误，需后端大佬配合解决
vue-router中的钩子总结
全局导航钩子
（1）beforeEach
（2）beforeResolve
（3）afterEach
某个路由独享的导航钩子
（1）beforeEnter
路由组件上的导航钩子
（1）beforeRouteEnter
（2）beforeRouteUpdate
（3）beforeRouteLeave
补充：Vue中的钩子总结
（1）beforeCreate（在此之前初始化生命周期、事件，但数据代理还未开始，此时还无法通过vm访问到data中的数据和methods方法）
（2）created（在此之前初始化数据监测和数据代理，此时可以通过vm访问到data中的数据和methods方法）
（3）beforeMount（在此之前Vue开始解析模板，生成虚拟DOM（内存中），还未渲染真实DOM，此时页面呈现的是未经Vue编译的DOM结构，所有对DOM的操作，最终都不凑效）
（4）mounted（在此之前将内存中的虚拟DOM转为真实DOM插入页面，此时页面呈现的是经过Vue编译的DOM结构，至此初始化过程结束，对DOM操作均有效，但应尽量避免）
（5）beforeUpdate（此时数据是新的，页面是旧的）
（6）updated（在此之前根据新数据，生成新的虚拟DOM进行比较，最终完成页面更新，此时页面和数据保持同步）
（7）beforeDestroy（此阶段vm中的所有data、methods等都处于可用状态，一般在此阶段进行关闭定时器等收尾工作）
（8）destroyed
（9）activated（路由组件被激活时触发）
（10）deactivated（路由组件被关闭时触发）
（11）errorCaptured（捕获一个来自后代组件的错误时被调用）
最后
希望整理的信息对您有所帮助,如果有什么建议,欢迎在评论区留言
不足之处还请批评指教,谢谢!
