vue项目配置3-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文件


import '@/assets/css/base.css'
Vue.config.productionTip = false


new Vue({
  el: '#app',
  router, // 挂载路由到实例中 
  store,// 挂载vuex到实例中
  components: { App },
  template: '<App/>'
})

3.router 元信息meta对象使用---登陆拦截验证

场景描述：当用户进入某个需要登录才能访问的权限页面（home.vue）时，验证用户是否登录，如果没有登录就跳转到登录页面(login.vue)，登录后返回之前的权限页面(home.vue)。home.vue 中嵌套了一个路由view,其子路由为 main.vue

（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'),
        children:[{
            path: 'mine',
            name: 'mine',
            component: () => import('@/pages/home/mine'),
            meta:{}  // 不做登录权限的设置
	    }],
        meta:{ isLogin : true } // 自定义一个属性，true需要登录权限
    },{
        path: '/login',
        name: 'login',
        component: () => import('@/pages/login'),
        meta:{}
    },
})

  //导航前守卫(跳转前)
  router.beforeEach(function(to,from,next){
    // to: 表示要跳转的页面。from:表示从哪个页面来
    let login_in = localStorage.login                  // 是否已登录
    let require = to.matched.some(function(item){      // 是否需要登录
/*有人会说不是直接用路由meta.isLogin来判断吗 即to.meta.isLogin。别，千万别这样干！！
 * 这一步很重要，不能直接用to.meta.isLogin的值进行是否需要登录权限的判断
 * 这样的话只是跳转到home.vue时会拦截，但是如果直接在地址栏访问 home.vue 的子页面mine.vue时
 *如：localhost:8080/#/home/mine，因为mine页面，配置路由时没有设置 isLogin，
 *所以to.meta.isLogin的值是false，会直接跳转不会进行拦截。所以要使用 to.matched 进行判断
 * to.matched 返回的是一个路由数组，指当前匹配的路径中所包含的所有路由片段所对应的路由对象。
 *比如： localhost:8080/#/home/mine 这个路径，to.matched 的数组 就是该路径中所包含的 home 和
 *mine 的路由实例。数组some()循环方法，是匹配数组中所有元素，只要有一个元素的某个值到达了条件，
 *该方法就会返回true。所以直接访问mine页面时，to.matched数组中，home对象的meta.isLogin是true，
 *达到了条件，所以整体返回了true，此时 require 的值即为true。 不懂数组some()方法的可以去恶补一下。
*/ 
      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

vue 完整项目配置1(下载/安装)

vue项目配置2-项目目录结构,vue打包白屏,图片加载不出等问题

vue项目配置4-Vuex状态管理-Vuex使用详解

vue项目配置5-axios请求配置

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

1.在router文件夹中找到 indexs.js

2.配置好router中的index.js文件后需要在main.js 中，挂载路由router到vue实例上

3.router 元信息meta对象使用---登陆拦截验证

猜你喜欢