博客

实现路由控制，没有登陆的用户不能通过地址访问其他页面，且会被跳转回登录界面。

import Vue from 'vue'
import Router from 'vue-router'
import {getCookie} from "@/assets/js/cookie";  //从cookie中判断是否登录了

Vue.use(Router)
  const routes = [
    {
      path: '/',
      name: 'Login',
      component: () => import('@/views/login/login')
    },
    {
      path: '/main',
      name: 'Main',
      component: () => import('@/views/main/main.vue')
    },
    {
      path: '/home',
      name: 'Home',
      component: () => import('@/views/home/home.vue')
    }
  ]

const router = new Router({
  mode: 'history',
  routes
})
export default router

router.beforeEach(async (to, from,next) => {
  if (getCookie("username") === ""   //判断是否已经登录了
      && to.name !== 'Login'       //判断是否要去的页面已经是登录页面了，避免反复跳转
  ) 
    next({ name: 'Login' })
  else next()
})