Vue+SpringBoot实践（九）：前端路由与登录拦截器

前言

经过前面几章，我们已基本知道如何前后端分离开发项目，细心的同学会发现在打开我们的项目时，url带有#号，这是由于我们做的是单页面开发，通过监听 # 号后面内容的变化（hashChange），从而动态改变页面内容，这种模式称之为Hash模式。
另一种常用的方式被称为 History 模式，这种模式的原理先把页面的状态保存到一个对象（state）里，当页面的 URL 变化时找到对应的对象，从而还原这个页面。

一、使用History模式路由页面

Vue内部已为我们提供了这两种方式，我们只要知道如何使用即可。修改 router\index.js，加入 mode: 'history’即可：

export default new Router({
   
  mode: 'history',
  routes: [
    {
   
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
   
      path: '/index',
      name: 'AppIndex',
      component: AppIndex,
      meta: {
   
        requireAuth: true
      }
    }
  ]
})

运行项目即可不带#号访问页面。其中 requireAuth字段是在需要拦截的路由中加一条元数据。

二、页面拦截

1.引入Vuex

运行 npm install vuex --save安装，在src底下新建目录store文件夹并新建index.js用于存储用户信息：

import Vue from 'vue'
import Vuex from