vue路由

路由跳转获取 登陆状态

store>index.js 文件

import Vue from ‘vue’
import Vuex from ‘vuex’

Vue.use(Vuex)

export default new Vuex.Store({
state: {
isLogin: false
},
getters: {
isLogin: state => state.isLogin
},
mutations: {
userStatus (state, flag) {
state.isLogin = flag
}
},
actions: {
setUser ({commit}, flag) {
commit(‘userStatus’, flag)
}
}
})

router>index.js 文件

import Vue from ‘vue’
import Router from ‘vue-router’
import HelloWorld from ‘@/components/HelloWorld’
import login from ‘@/components/login’
import second from ‘@/components/second’
Vue.use(Router)

export default new Router({
mode:‘history’,
routes: [
{
path: ‘/’,
name: ‘HelloWorld’,
component: HelloWorld,
meta: {
isLogin: false
}
},
{
path: ‘/login’,
name: ‘login’,
component: login,
meta: {
isLogin: false
}
},
{
path: ‘/second’,
name: ‘second’,
component: second,
meta: {
isLogin: true
}
}
]
})

main.js入口文件

import Vue from ‘vue’
import App from ‘./App’
import router from ‘./router’
import store from ‘./store/index’
Vue.config.productionTip = false
new Vue({
el: ‘#app’,
router,
store,
components: { App },
template: ‘’
})
router.beforeEach((to, from, next) => {
let getFlag = localStorage.getItem(‘Flag’) /* 这里是判断用户是否登录过，登录后在localStroage内存储Flag=isLogin /
if (getFlag === ‘isLogin’) { / 如果存在Flag并且为isLogin意味着用户登录，这时修改vux内state下isLogin的状态 /
store.state.isLogin = true
next()
} else {
if (to.meta.isLogin) { / 如果没有登录状态*/
next({
path: ‘/login’
})
console.log(‘请先登录’)
} else {
next()
}
}
})

HelloWorld.vue

second.vue

login.vue