好的,我们这里废话不多说,直接开始今天得vue-router得使用心得分享
这篇文章我们不讲router得基本知识,我们讲再项目中怎么方便得使用vue-router.
//首先这里先创建一个router.js文件,再router.js文件中引入vue以及vue-router
import Vue from 'vue'
import Router from 'vue-router'
//接下来有两种方法
import Login from '@/views/Login'
//然后再
{
path: '/',
name: 'Login',
component: Login,
hidden: true
}
// 这里不建议使用此种方法 会出现加载过慢
推荐使用
{
path: '/',
name: 'Login',
component: () => import Login from '@/views/Login'
hidden: true
}
//在这里我们还可以进行一些语义化得封装
const login = () => import ( '@/views/Login')
//使用
{
path: '/',
name: 'Login',
component:login',
hidden: true
}
接下来还有一些路由守卫得功能,大家可以看一下我得相关代码,根据具体需求写
const whiteList = ['/adMeetingRoomList', '/adShowAllMtRoom', '/screenWelcome', '/apkUpload'] // no redirect whitelist
router.beforeEach((to, from, next) => {
// 在免登录白名单,直接进入
if (whiteList.indexOf(to.path) !== -1) {
next();
} else {
if (to.name == 'Login') {
next();
return;
}
var name = store.state.user.name;
if (name == '未登录') {
if (to.meta.requireAuth || to.name == null) {
next({
path: '/',
query: {
redirect: to.path
}
})
} else {
setButtonPower(router, store, to);
next();
}
} else {
initMenu(router, store);
if (to.path == '/chat')
store.commit("updateMsgList", []);
if (to.name != from.name && window.autoSave && window.autoSave.pageName && from.name == window.autoSave.pageName && checkAutoSaveData()) {
let p = to.path;
window.autoSave.pageObj.$confirm('您的信息还没有保存,是否需要保存?', {
type: "warning",
center: true,
closeOnClickModal: false,
closeOnPressEscape: false,
confirmButtonText: '需要保存',
cancelButtonText: '不需要'
})
.then(_ => {
return;
})
.catch(_ => {
delAutoSaveData(p);
store.commit("updateName", "");
});
return;
}
setButtonPower(router, store, to);
next();
}
}
})