阻止用户直接通过url地址进入页面,防止页面后退,控制页面在前进或回退是执行想要的操作(路由守卫)

一.阻止用户直接通过url地址进入页面
1.main.js

//这里的requireAuth为路由中定义的 meta:{requireAuth:true}，意思为：该路由添加该字段，表示进入该路由需要登陆的
router.beforeEach((to, from, next) => {
	if (to.matched.some(r => r.meta.requireAuth)) {
		if (store.state.token) {
			next();
			console.log("已登录");
			
		}
		else {
			console.log("请登录");
			
			next({
				path: '/',
				query: { redirect: to.fullPath }
			})
		}
	}
	else {
		next();
	}
})

2.router.js

// 用户管理
        { path: '/userAdmin', name: 'userAdmin', component: userAdmin,meta:{requireAuth:true}},
        { path: '/userDetail', name: 'userDetail', component: userDetail,meta:{requireAuth:true}},
        { path: '/userRecord', name: 'userRecord', component: userRecord,meta:{requireAuth:true}},
        // 活动管理
        { path: '/actAdmin', name: 'actAdmin', component: actAdmin,meta:{requireAuth:true}},
        { path: '/actPublish', name: 'actPublish', component: actPublish,meta:{requireAuth:true}},
        { path: '/actAdd', name: 'actAdd', component: actAdd,meta:{requireAuth:true} },
        // 地点管理
        { path: '/addrAdmin', name: 'addrAdmin', component: addrAdmin ,meta:{requireAuth:true}},
        { path: '/addrSeat', name: 'addrSeat', component: addrSeat,meta:{requireAuth:true}},
        // 轮播图管理
        { path: '/slideShow', name: 'slideShow', component: slideShow,meta:{requireAuth:true}},
        { path: '/slideAdd', name: 'slideAdd', component: slideAdd,meta:{requireAuth:true}},

二.防止页面后退 使用在vue时 挂载到mounted中

history.pushState(null, null, document.URL);
        window.addEventListener('popstate', function () {
            history.pushState(null, null, document.URL);
        });

三.控制页面在前进或回退是执行想要的操作
如,直接回退到首页
router.js

{path:'sendSucc',name:'sendSucc',component:sendSucc,meta:{title:"发送邀请",keepAlive:false}},
    {path:'sendIn',name:'sendIn',component:sendIn,
      beforeEnter:(to, from, next) => {
        from.path == 'sendSucc' ? next('/') :next();
      },
    meta:{title:"活动订票",keepAlive:true}},