**
vue-router中手动输入url地址beforeEach不生效
**在手动输入地址栏url时候,new Vue()函数未将router.beforeEach()这个函数加载到实例中去。
解决方法:将router.beforeEach()这个函数写到Vue实例加载之前,在手动输入地址栏时候便可使得函数生效
一、如果未对路由封装而导致的未生效,需要将此段代码放置new Vue({ render: (h) => h(App)})前
图片1:
代码如下
router.beforeEach((to, from, next) => {
if (to.meta.requireAuth) {
if (localStorage.getItem("token")) {
next()
} else {
next("/login")
}
} else {
next()
}
}
)
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
二、对路由封装,依旧未生效,需要将代码插入代码export default router前
如图
代码如下:
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes,
});
router.beforeEach((to, from, next) => {
if (to.meta.requireAuth) {
if (sessionStorage.getItem("token")) {
next();
} else {
next("/");
}
} else {
next();
}
});
export default router;