vue路由守卫

最新推荐文章于 2025-07-02 08:50:38 发布

原创最新推荐文章于 2025-07-02 08:50:38 发布 · 117 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

28 篇文章

订阅专栏

博客给出代码示例，涉及 router/index.js 文件。包含登陆页面 login 和主页面 main 两个页面，关键代码为 router.beforeEach((to, from, next) => {})，与前端路由设置相关。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/page/Login'
import Main from '@/components/page/Main'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/main',
      name: 'Main',
      component: Main
    }]
});

router.beforeEach((to, from, next) => {
	if(to.name == "Login"){
	    console.log("请求login页面");
	    next();
	  }else if(this.token != null){
	    console.log("登录状态");
	    next();
	  }else{
	    console.log("未登录");
	    router.push({ name: 'Login' })
	  }
});

export default router;