Vue+ Element Ui 搭建前端项目框架（三）然后设置路由，因为dome用的页面比较少，这里就不封装动态路由了，

实现动态跳转

上篇写的太仓促，首先第一步我们要把默认路由‘/’重新设置为login
然后设置路由，因为dome用的页面比较少，这里就不封装动态路由了，这里用生产环境来动态引入组件。先根据生产环境的名字封装js文件。

// import-development.js 开发环境
module.exports = file => require('@/views/' + file + '.vue').default
// import-production.js  生产环境
module.exports = file => () => import('@/views/' + file + '.vue')

在index.js里面使用

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//这里我们根据生产环境来动态配置文件
const _import = require('./import-' + process.env.NODE_ENV)
// 基础的模块，不需要进入到嵌套结构
const basicsRouter = [
  { path: '/404', component: _import('common/404'), name: '404', meta: { title: '404未找到' } },
  { path: '/login', component: _import('common/login'), name: 'login', meta: { title: '登录' } }
]
const mainRoutes = {
  path: '/',
  component: _import('main'),
  name: 'main',
  redirect: { name: 'home' }, // 重定向
  meta: { title: '主入口整体布局' },
  children: [
    // 通过meta对象设置路由展示方式
    { path: '/home', component: _import('common/home'), name: 'home', meta: { title: '首页' } },
    // 这块是新封装的两个组件，可以按照自己的名字走。这里因为功能少，所以我们路由可以直接写，不用创建动态路由。
    {path: '/user',component: _import('modules/user'),name:'user',meta: {title: '用户管理'}},
    {path: '/log',component: _import('modules/log'),name:'log',meta: {title: '日志管理'}}
  ],
  beforeEnter (to, from, next) {
    // 可以在这里判断登录状态，在这里我们假设登录的时候将用户名称存入session
    // 判断session里面有无用户名
    if(sessionStorage.getItem('user') === null) {
      next({ name: 'login' })
    } else {
      next()
    }
  }
}
const router = new VueRouter({
  mode: 'history',
  routes: basicsRouter.concat(mainRoutes)
})
export default router

到这里路由就封装完了

因为我们在路由钩子函数beforeEnter中判断了是否有存入用户名，所以我们回到login.vue中登录的时候存入用户名

<template>
    <el-button class="loginButton" type="primary" @click="loginIn">登录</el-button>
</template>

<script>
    export default {
        name: "login",
        methods:{
            loginIn(){
                sessionStorage.setItem('user','admin')
                this.$router.push({name:'home'})
            }
        }
    }
</script>

点击后就直接可以跳入home页面了

进入之后我们就会发现我们的左侧菜单有点单调。添加一下菜单组件，并且在每个上面绑定点击事件切换路由。这里我懒得封装函数了就直接在菜单标签上直接绑定了。

<aside class="mia-sidebar">
        <el-menu text-color="#000">
            <el-menu-item index="1" @click="$router.push({name:'home'})">
                <i class="el-icon-menu"></i>
                <span slot="title">首页</span>
            </el-menu-item>
            <el-menu-item index="2" @click="$router.push({name:'log'})">
                <i class="el-icon-document"></i>
                <span slot="title">日志管理</span>
            </el-menu-item>
            <el-menu-item index="3" @click="$router.push({name:'user'})">
                <i class="el-icon-setting"></i>
                <span slot="title">用户管理</span>
            </el-menu-item>
        </el-menu>
    </aside>

基本完结了，明天把之前的自定义主题和更换字体搞一下。

Vue+ Element Ui 搭建前端项目框架（三）

目录：

实现动态跳转