vue router路由配置，元信息meta的使用-登录拦截验证

原文来自 vue router路由配置，元信息meta的使用-登录拦截验证_shenroom的博客-CSDN博客

看原文排版更舒服，我只是记录一下

路由基本配置
1.在router文件夹中找到 indexs.js

注意：如果创建项目是没有安装router，不会有router文件夹，该文件夹在src 文件夹的根目录中

// 1.引入路由以及vue，下面的是固定写法，照写就可以
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

2.创建路由实例
const router = new Router({
linkActiveClass: 'app-active', // 路由点击选中时的颜色（app-active为自定义的class样式类）
routes: [
{ // 根路径
path: '/',
redirect: '/home',
component: () => import('@/pages/home') // 路由懒加载写法
},
{
path: '/home',
name: 'home',
component: () => import('@/pages/home'),
}
})

/* 路由拦截器 路由跳转前的操作 */
router.beforeEach((to, from, next) => {
next()
})
/* 路由拦截器 路由跳转后的操作 */
router.afterEach(to => {

})

3.将路由导出，供外部接收，主要用于main.js接收
export default router
2.配置好router中的index.js文件后需要在main.js 中，挂载路由router到vue实例上

import Vue from 'vue'
import App from './App'
import router from './router' // 导入配置好的路由文件
import store from './store' // 导入配置好的vuex文件
Vue.config.productionTip = false

new Vue({
el: '#app',
router, // 挂载路由到实例中
store,// 挂载vuex到实例中
components: { App },
template: '<App/>'
})
通过上面两步，路由的基本配置已经完成可以正常使用路由了。

路由元信息meta使用
1.路由拦截器

router.beforeEach( to, from, next )

router.afterEach( to, from )

参数说明：

to:表示要跳转的路由对象。

from:表示跳转前的路由对象

next:继续执行跳转的函数，只有跳转前的拦截才有这个参数。

import Router from 'vue-router'
Vue.use(Router)

const router = new Router({
routes: [{
path: '/',
redirect: '/home',
component: () => import('@/pages/home')
}]
})

/* 路由拦截器 路由跳转前的操作 */
router.beforeEach((to, from, next) => {
/* 路由跳转前可进行各种操作，如数据处理，权限验证，取消上页所有网络请求等等，
*一定要注意，数据处理后，一定要执行next(),否则路由不会进行跳转。*/
if(true){
// 进行的操作
next()
}else{
// 进行的一些操作
next()
}

})
/* 路由拦截器 路由跳转后的操作 */
router.afterEach(to => {
// 在这里执行路由跳转成功后所进行的操作
})

export default router
上面已经解了拦截器的基本使用，下面再来看一下，拦截器结合路由元信息meta的使用。

2.路由拦截器中元信息meta对象的使用----登陆拦截验证 和 修改页面的 title

场景描述如下图:

1.用户访问home页面,或者home的子页面mine页面时，由于home只有登陆后才能进入，所以用户在访问这两个页面时需要判断是否登录，如果没有登录就跳转到登录页面，登录成功后自动跳转到用户访问的权限页面。

2.当调转对应的路由页面时，就更改网页的名字，也就是index.heml 中 head 标签里面的 title 的值

（1）、首先准备三个路由页面，home.vue 、 login.vue 、mine.vue

/*------------------------------------------home.vue------------------------------------------*/
<template>
<div>
<h1>首页</h1>
<router-link to="/home/mine">前往首页子页面</router-link>
<router-view></router-view>
<div>
</template>
...
/*------------------------------------------mine.vue------------------------------------------*/
<template>
<div>
<h1>子页面</h1>
<div>
</template>
...
/*------------------------------------------login.vue------------------------------------------*/
<template>
<div>
<h1>登录页面</h1>button
<button @click="login">前往首页子页面</button>
<div>
</template>
<script>
...
methodes:{
login(){
localStorage.login = true // 登录状态
// this.$route.params.redirect 是路由拦截是传过来的拦截页面的路由对象，看下文的路由拦截配置详情，有说明。
if( this.$route.params.redirect ){ // 判断是否有redirect参数
this.$router.push( this.$route.params.redirect ) 登录后跳回被的拦截
}
}
}
...
</script>
（2）、在路由配置router/index.js文件中 设置路由拦截

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const router = new Router({
routes: [
{ // 根路径
path: '/',
redirect: '/home',
component: () => import('@/pages/home'), // 路由懒加载写法
},{
path: '/home',
name: 'home',
component: () => import('@/pages/home'),
meta:{
isLogin : true // 自定义一个属性，true需要登录权限
title:"主页"
},
children:[{
path: 'mine',
name: 'mine',
component: () => import('@/pages/home/mine'),
meta:{ // 不做登录权限的设置
title:"用户中心页"
}
}]
},{
path: '/login',
name: 'login',
component: () => import('@/pages/login'),
meta:{
title:"登录页"
}
},
})

//导航前守卫(跳转前)
router.beforeEach(function(to,from,next){
// to: 表示要跳转的页面。from:表示从哪个页面来
let login_in = localStorage.login // 是否已登录
let require = to.matched.some(function(item){ // 是否需要登录
return item.meta.isLogin
})
if( !login_in && require ){ // 当未登录，且跳转的页面需要登录后才能操作时，进行路由拦截
next({ // 跳转登录页
name: "login",
params: { redirect: to } // 将 要跳转（即被拦截） 的路由对象，作为参数，传递到登录页面
});
}else{ // 已登录就正常跳转，不做任何拦截
next() // 正常跳转到下一页
}
})
//导航后守卫(跳转后)
router.afterEach(function(to,from){
document.title = to.meta.title //跳转后设置页面的title
})
export default router
到此所需的功能我们已经实现了。

细心的人可能会发现 beforeEach 拦截器中 变量 require 的值不是应该直接用路由meta.isLogin 的值 即 to.meta.isLogin的值？。为什么使用了数组some()方法对to.matched进行循环，来赋值？to.matched又指的是什么？

这一步很重要，不能直接使用to.meta.isLogin的值，这样的话只是跳转到home.vue时会被拦截，但是如果直接在地址栏访问 home.vue 的子页面mine.vue时如：localhost:8080/#/home/mine ，就不会进行拦截。

因为mine.vue页面，配置路由时没有在meta中设置 isLogin，所以to.meta.isLogin的值是false，会直接跳转不会进行拦截。所以要循环to.matched 进行判断。说了这么多，咱来看一下to.matched指的是什么：

to.matched 返回的是一个数组，里面是存放的是路由对象，指当前匹配的路径中所包含的路由片段所对应的路由对象。

比如：localhost:8080/#/home/mine 这个路径中我看到有两个路由片段home 和 mine

因此to.matched 的数组存放的就是 home 和 mine 的路由实例。用数组some()循环方法，是匹配数组中所有元素，只要有一个元素的某个值到达了条件 item.meta.isLogin 为true，该方法就会返回true。所以直接访问mine页面时，to.matched数组中，home对象的meta.isLogin是true，达到了条件，所以整体返回了true，此时 require 的值即为true。 不懂数组some()方法的可以去恶补一下ES6-数组新增的方法。
————————————————
版权声明：本文为CSDN博主「shenroom」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_41772754/article/details/87915596