Directory:

(a) juejin. Cn/post / 684490…

(2) juejin. Cn/post / 684490…

Dynamic jump
  • The first step is to reset the default route ‘/’ to login
  • We then set up the routing, because dome uses fewer pages, we don’t encapsulate dynamic routing here, we use production environment to dynamically import components. Wrap the JS file according to the name of the production environment.
Module. exports = file => require(// import-development.js module. Exports = file => require('@/views/' + file + '.vue'// import-production.js module. Exports = file => () => import()'@/views/' + file + '.vue')
Copy the code

Use it in index.js

import Vue from 'vue'
import VueRouter from 'vue-router'Use (VueRouter) const _import = require(VueRouter)'./import-'+ process.env.node_env) const basicsRouter = [{path:'/ 404', component: _import('common/404'), name: '404', meta: { title: '404 not found ' } },
  { path: '/login', component: _import('common/login'), name: 'login', meta: { title: 'login' } }
]
const mainRoutes = {
  path: '/',
  component: _import('main'),
  name: 'main',
  redirect: { name: 'home'}, // Redirect meta: {title:'Overall layout of main entrance'}, children: [// Set route display mode with meta object {path:'/home', component: _import('common/home'), name: 'home', meta: { title: 'home'}}, // This is the new package of two components, can follow their own names. Because there are few functions here, we can write routes directly without creating dynamic routes. {path:'/user',component: _import('modules/user'),name:'user',meta: {title: 'User Management'}},
    {path: '/log',component: _import('modules/log'),name:'log',meta: {title: 'Log Management'}}], beforeEnter (to, from, next) {beforeEnter (to, from, next) {beforeEnter (to, from, next) {// Determine the login state hereif(sessionStorage.getItem('user') === null) {
      next({ name: 'login'})}else {
      next()
    }
  }
}
const router = new VueRouter({
  mode: 'history',
  routes: basicsRouter.concat(mainRoutes)
})
export default router
Copy the code

This is where the route is encapsulated

Since we determine whether a user name is stored in the routing hook function beforeEnter, we store the user name when we log back in 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>
Copy the code

Click to jump directly to the home page

  • Once inside, we’ll find that our left menu is a bit monotonous. Add menu components and bind click-event switch routes to each. I’m not going to wrap the function here and I’m just going to bind it directly on the menu tag.
<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"> Log Management </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>Copy the code

Basically finished, tomorrow to do the previous custom theme and font change.