Vue--啟動後到載入第一個頁面的過程
阿新 • • 發佈：2020-07-27
位址列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