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

路由基本配置

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-数组新增的方法。