(1). 需求

判断用户是否已经登录,如果没有登录,则跳到/login页面,如果已经登录,跳到:/main页面.
可通过路由钩子函数实现(beforeEach),这个方法会在每次路由跳转之前都会调用.
通过sessionStorage去存储,无法存储为一个对象.所以,可以用vertx来存储数据.

src/views/Login.vue

// 登录成功后,设置登录成功,并且把用户名保存到:sessionStorage里
sessionStorage.setItem('isLogin','true');
sessionStorage.setItem('userName',this.form.userName);

src/main.js

// 每次路由跳转之前都会执行该方法
router.beforeEach((to,from,next)=>{
  let isLogin = sessionStorage.getItem('isLogin');
  // 注销时,清空session
  if(to.path == '/logout') {  // 判断是否为退出登录,退出登录,则清空session中信息,并跳到登录页面
    console.log("logout");
    sessionStorage.clear();
    // 跳转到登录页面
    next({ path:"/login"});
  } else if(to.path == '/login'){  //判断请求是否为登录
    // 如果已经登录过了,则跳到首页.
    if(isLogin != null){
      // 获取到用户名,跳转到首页
      let userName = sessionStorage.getItem('userName');

      // params只能通过:name(路由中指定的名称)来实现,不能像上面那样,指定:path
      // next({name:"Main",params:{userName:userName}});
      next({name:"Main",params:{userName:userName}});
    }
  } else if(isLogin == null){
    // 跳转到登录页面
    next({ path:"/login"});
  }
  
  next();
});

src/Main.vue(通过计算属性获得登录的用户名)

<template>
	// ... ...
	<span></span>
	// ... ...
</template>
<script>
export default {
    // props : ['userName'] ,
    name : "Main",
    computed:{
        getUserName(){
            return sessionStorage.getItem('userName');
        }
    },
    data() {
        return {
            
        }// end return 
    }
}
</script>

(2). Vuex

Vuex是专门为vue.js应用程序开发的:状态管理模式.它采用集中式存储管理应用所有组件的状态.并以相应的规则保证状态以一种可预测的方式发生变化.

(3). 安装

lixin-macbook:vue-elementui lixin$ cnpm install vuex --save

(4). 创建vuex的配置

src/store/index.js

import Vue from 'vue'
// 导入vuex
import Vuex from 'vuex'

Vue.use(Vuex);

// 注意:state/getters/mutaions 名称都是固定了的

// state相当于一个全局对象,用于保存所有组件公共(shard)的数据
const state = {
    user : {
        userName : ""
    }
};

// 获取state的最新状态(这是一个计算属性值)
const getters = {
    getUser(state){
        return state.user;
    }
};

// 修改state值的方法(这个方法会同步执行)
const mutations = {
    updateUser(state,user){
        state.user = user;
    }
};

// 异步执行:updateUser
const actions = {
    asyncUpdateUser(context,user){
        context.commit("updateUser",user);
    }
}

export default new Vuex.Store({
    state,
    getters,
    mutations,
    actions
});

(5). 配置main.js

src/main.js

// 导入vuex
import Vuex from 'vuex'

// 导入vuex的配置
import store from './store/index.js'

// 使用
Vue.use(Vuex);



new Vue({
  el: '#app',
  router,
  // 使用:store
  store,
  render: h => h(App)
})

(6). 通过Store改造需求

src/views/Login.vue

// 通过vertx来存储内容(asyncUpdateUser:为src/store/index.js中的actions)
this.$store.dispatch("asyncUpdateUser",{userName : this.form.userName });

src/Main.vue

<!-- 从vuex中读取() -->
<span></span>

src/App.vue(这一步主要是防止窗口刷新,数据丢失)

<template>
  <div id="app">
    <!-- 配置路由组件 -->
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  created(){
    window.addEventListener("beforeunload",()=>{
      sessionStorage.setItem('state',JSON.stringify(this.$store.state));
    });
	
    if(sessionStorage.getItem('state')){
      this.$store.replaceState(Object.assign({},this.$store.state,JSON.parse(sessionStorage.getItem('state'))));
    } //end
  }
}
</script>
<style>
</style>

(7). 项目下载

“Vuex项目下载”