首页 / 前端 / Nuxt.js / nuxt路由守卫
nuxt路由守卫
简单 Nuxt.js
979浏览
2020-03-30 15:46:20

1.在plugins下新建route.js

import { Message } from 'element-ui';
export default ({ app, store }) => {
  app.router.afterEach((to, from) => {
    const nextRoute = [ 'user' ];
    const loginRoute = [ 'login' ];
      if (nextRoute.indexOf(to.name) != -1) {
        //未登录
        if (!store.state.token) {
          Message({
            type: 'error',
            message: '请先登录!'
          })
          app.router.push({
            name: 'login'
          })
        }
      }
    //已登录再去登录页,跳转至首页
    if (loginRoute.indexOf(to.name) != -1) {
      if (store.state.token) {
         Message({
           type: 'success',
           message: '你已登陆!'
         })
        app.router.push({
          name: 'index'
        });
      }
    }
  })
}

2:nuxt.config.js中添加配置plugins即可

plugins: [
    '@/plugins/element-ui',
    '~/plugins/route'
],
相关推荐