Vue+ Element Ui 搭建前端專案框架（三）

目錄：

（一）juejin.im/post/5e6c78…

（二）juejin.im/post/5e6ed2…

實現動態跳轉

• 上篇寫的太倉促，首先第一步我們要把預設路由‘/’重新設定為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>
複製程式碼

基本完結了，明天把之前的自定義主題和更換字型搞一下。