Vue(读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，方便与第三方库或既有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

目录

根据用户是否登录（或者其他权限均可），显示或不显示页面。需要先导入router。

在 router 的 index.js 中加入全局导航守卫

import Vue from 'vue'
import Router from 'vue-router'
import index from '../views/index.vue'
import PageOne from '../views/PageOne.vue'
import PageTwo from '../views/PageTwo.vue'
import PageThree from '../views/PageThree.vue'
import PageFor from '../views/PageFor.vue'
import login from '../views/login/index.vue'

Vue.use(Router)

const router = new Router({
  mode: 'history', // 去掉url中的#
  routes: [
    {
      path: '/login',
      name: '登录',
      meta: {
        show:false, //是否显示在导航
        requireAuth:false //是否需要登录
        },
      component: login
    },
    {
      path: '/',
      name: '物品管理',
      component: index,
      meta: {
        show:true, //是否显示在导航
        requireAuth:true //是否需要登录
        },
      redirect: '/PageOne',
      children: [
        {
          path: '/PageOne',
          name: '物品添加',
          component: PageOne
        },
        {
          path: '/PageTwo',
          name: '物品删除',
          component: PageTwo
        }
      ]
    },
    {
      path: '/two',
      name: '导航二',
      component: index,
      meta: {
        show:true, //是否显示在导航
        requireAuth:true //是否需要登录
        },
      children: [
        {
          path: '/PageThree',
          name: 'PageThree',
          component: PageThree
        },
        {
          path: '/PageFor',
          name: 'PageFor',
          component: PageFor,
          meta: {
            show:true, //是否显示在导航
            requireAuth:true //是否需要登录
          },
        }
      ]
    }
  ]
})


router.beforeEach((to,from,next)=>{
  if(to.meta.requireAuth){ //判断访问的路由是否需要登录
    let token = JSON.parse(window.localStorage.getItem('token')) //获取本地token
      if(token!=null){ //登录过
        if(token=='qwerqwerwer'){ //自行更改为从后端获取
          next()
        }else{
          next({path:'/err'})
        }
      }else{ //没有登录
        next({path:'/login'})
      }
  }else{ //不需要登录
    next()
  }
})

export default router

在登陆成功时，进行本地设置token，示例中是写死的token，可自行从后端获取设置。

<template>
    <div class="login-container">
        <el-form :model="ruleForm" :rules="rules"
         status-icon
         ref="ruleForm"
         label-position="left"
         label-width="0px"
         class="demo-ruleForm login-page">
            <h3 class="title">系统登录</h3>
            <el-form-item prop="username">
                <el-input type="text"
                    v-model="ruleForm.username"
                    auto-complete="off"
                    placeholder="用户名"
                ></el-input>
            </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password"
                        v-model="ruleForm.password"
                        auto-complete="off"
                        placeholder="密码"
                    ></el-input>
                </el-form-item>
            <el-checkbox
                v-model="checked"
                class="rememberme"
            >记住密码</el-checkbox>
            <el-form-item style="width:100%;">
                <el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="logining">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    data(){
        return {
            logining: false,
            ruleForm: {
                username: '',
                password: '',
            },
            rules: {
                username: [{required: true, message: '请输入正确的用户名!', trigger: 'blur' }],
                password: [{required: true, message: '请输入正确的密码!', trigger: 'blur'}]
            },
            checked: false
        }
    },
    methods: {
        handleSubmit(event){
            this.$refs.ruleForm.validate((valid) => {
                if(valid){
                  let _this = this
                  if(_this.ruleForm.username=='admin' && _this.ruleForm.password=='123456'){
                    localStorage.setItem('token','qwerqwerwer')
                    _this.$router.replace({path:'/'})
                  }else{
                    return false;
                  }

                }else{
                    console.log('error submit!');
                    return false;
                }
            })
        }
    }
};
</script>

<style scoped>
.login-container {
    width: 100%;
    height: 100%;
}
.login-page {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 15px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
}
label.el-checkbox.rememberme {
    margin: 0px 0px 15px;
    text-align: left;
}
</style>