Vue--启动后到加载第一个页面的过程
地址栏http://localhost:8088/#/填写密码登录后自动跳转到http://localhost:8088/#/home/msg/workerpush
一\ 得先跳转到login页面
{ path: '/',
component: Login,
name: 'Login' },
二 路由拦截器
本项目没有使用路由拦截器
路由拦截器是:
router.js中
{
path:'/manage',
name:'manage',
component:manage,
meta:{requireAuth:true}
},
..
new Vue({ el: '#app', data(){ return{ requireAuthNum:1 } }, router:router, store, components: { App }, template: '<App/>', created () { router.beforeEach((to, from, next) => { var _this = this; // if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限 if(to.meta.requireAuth && _this.requireAuthNum==1){ if(JSON.parse(localStorage.getItem("login"))==null){ console.log('没有登录') _this.$router.push({path: '/',query: {redirect: to.fullPath}}) next() } else { _this.requireAuthNum++; _this.$router.push({path: to.fullPath}) next() } } else { _this.requireAuthNum = 1; next(); } }); } })
..
localStorage.setItem("login",JSON.stringify(login)); let redirect = decodeURIComponent(this.$route.query.redirect || '/'); console.log(redirect); if(redirect == '/'){ _this.$router.push({path: '/index'}); console.log('login'); }else{ _this.$router.push({path: redirect}); console.log('重定向回去') }
参考:https://www.cnblogs.com/zhengzemin/p/vueRouter_lanjie.html
路由拦截其实很简单：1）加上meta。2）router.beforeEach函数加上判断即可
三 本项目采取的策略,在home.vue的create方法中进行判断
created() {
// this.getTitleAndLogo()
let authKey = Lockr.get('authKey')
let sessionId = Lockr.get('sessionId')
if (!authKey || !sessionId) {
_g.toastMsg('warning', '您尚未登录')
setTimeout(() => { //主要是这个1.5秒后跳转
router.replace('/')
}, 1500)
return
}
this.getUsername()
let menus = Lockr.get('menus')
this.menu = this.$route.meta.menu
this.module = this.$route.meta.module
this.topMenu = menus
_(menus).forEach((res) => {
if (res.module == this.module) {
this.menuData = res.child
res.selected = true
} else {
res.selected = false
}
})
},
五 进入login.vue 项目入口
login.vue 中
<template>
<el-form-item style="width:100%;">
<el-button type="primary" style="width:100%;" v-loading="loading" @click.native.prevent="handleSubmit2('form')">登录</el-button>
</el-form-item>
</template>
<script>
methods:{
handleSubmit2(form) {
if (this.loading) return
this.$refs.form.validate((valid) => {
if (valid) {
this.loading = !this.loading
let data = {}
if (this.requireVerify) {
data.user_name = this.form.username
data.password = this.form.password
data.verifyCode = this.form.verifyCode
} else {
data.user_name = this.form.username
data.password = this.form.password
}
if (this.checked) {
data.isRemember = 1
} else {
data.isRemember = 0
}
this.apiPost('admin/login', data).then((res) => { //看这里!!!
if (res.code != 200) {
this.loading = !this.loading
this.handleError(res)
} else {
this.refreshVerify()
if (this.checked) {
Cookies.set('rememberPwd', true, { expires: 1 })
}
this.resetCommonData(res.data)
_g.toastMsg('success', '登录成功')
}
})
} else {
return false
}
})
},
}
this.resetCommonData(res.data)
resetCommonData(data) {
_(data.menusList).forEach((res, key) => {
if (key == 0) {
res.selected = true
} else {
res.selected = false
}
})
Lockr.set('menus', data.menusList) // 菜单数据
Lockr.set('authKey', data.authKey) // 权限认证
Lockr.set('rememberKey', data.rememberKey) // 记住密码的加密字符串
Lockr.set('authList', data.authList) // 权限节点列表
Lockr.set('userInfo', data.userInfo) // 用户信息
Lockr.set('sessionId', data.sessionId) // 用户sessionid
window.axios.defaults.headers.authKey = Lockr.get('authKey')
let routerUrl = ''
if (data.menusList[0].url) {
routerUrl = data.menusList[0].url
} else {
routerUrl = data.menusList[0].child[0].child[0].url+"?t="+Date.parse(new Date());//这里是为了测试自己添加的
}
setTimeout(() => {
let path = this.$route.path
if (routerUrl != path) {
router.replace(routerUrl)
} else {
_g.shallowRefresh(this.$route.name)
}
}, 1000)
},
六 点击菜单的跳转过程
leftMenu.vue
<script>
export default {
methods: {
routerChange(item) {
// 与当前页面路由相等则刷新页面
if (item.url != this.$route.path) {
//router.push(item.url)
alert("this is at leftMenu.vue:55"+item.url);
router.push({path:item.url,query:{ t:Date.parse(new Date())}})
} else {
alert("this is at leftMenu.vue:55"+item.url);
// router.push({path:item.url,query:{t:Date.parse(new Date())}})
_g.shallowRefresh(this.$route.name) //看着
}
}
}
}
</script>
..
global.js中
const commonFn = {
j2s(obj) {
return JSON.stringify(obj)
},
shallowRefresh(name) {
router.replace({ path: '/refresh', query: { name: name }})
},
...
}
..路由routes.js
{
path: '/home',
component: Home,
children: [
{ path: '/refresh', component: refresh, name: 'refresh' }
]
},
..refresh.vue
<template>
<div></div>
</template>
<script>
export default {
created() {
if (this.$route.query.name) {
router.replace({ name: this.$route.query.name })
} else {
console.log('refresh fail')
}
}
}
</script>
这里说明:由于用到了el-munu控件,设置了使用了 index=url跳转会导致@onclick的跳转 路由判断时效
<template>
<div>
<el-aside :width="isCollapse?'56px':'210px'">
<el-menu
mode="vertical"
unique-opened
:collapse="isCollapse"
:collapse-transition="false"
:router="true"
:default-active="activePath">
<!-- 一级菜单 -->
<el-submenu :index="item.id + ''" v-for="item in menuData" :key="item.id">
<!-- 一级菜单的模版区域 -->
<template slot="title">
<!-- 图标 -->
<i class="el-icon-chat-round"></i>
<!-- 文本 -->
<span style="color: #ffffff" class="menu_style">{{ item.title }}</span>
</template>
<!-- 二级菜单 -->
<el-menu-item :index="subItem.url" v-for="subItem in item.child" :key="subItem.id" @click="routerChange(subItem)">
<template slot="title">
<!-- 图标 -->
<i class="el-icon-chat-round"></i>
<!-- 文本 -->
<span>{{ subItem.title }}</span>
</template>
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
</div>
</template>
..
methods: {
routerChange(item) {
// 与当前页面路由相等则刷新页面
if (item.url != this.$route.path) { //这里失效了
//router.push(item.url)
alert("this is at leftMenu.vue:55"+item.url);
router.push({path:item.url,query:{ t:Date.parse(new Date())}})
} else {
alert("this is at leftMenu.vue:55"+item.url);
// router.push({path:item.url,query:{t:Date.parse(new Date())}})
_g.shallowRefresh(this.$route.name)
}
}
}
七 遗留问题:为什么以后页面都是/home的子路径,包括/refesh
atzhang
