1. First, support according to Vue router

 npm install vue-router
Then you need to introduce:

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

2. Define the js file of router

import Vue from 'vue'
import Router from 'vue-router'
import User from '../pages/user'
import Home from '../pages/public/home'
import Profile from '../pages/user/profile'
import Form from '../pages/form'
import Detail from '../pages/form/form'
import File from '../pages/form/file'
import Files from '../pages/file'

Vue.use(Router)

export default new Router({
    routes: [
        { path: '/', component:Home,
            children:[
                { path: '/user', component:Profile},
                { path: '/profile', component: User},
                { path: '/form', component: Form},
                { path: '/detail', component: Detail},
                { path: '/profiles', component: Files},
                { path: '/file', component: File}
            ]
        },

       { path: '/login', component:Login},
       { path: '/404', component:Error}

   ] 
})

3. Introduce router in main.js

import router from './router'

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

4. Definition of entry page

<div id="app">
    <router-view></router-view>
  </div>

5. In the page with path pointing to "/", define the layout of the page, for example: top (head) - middle (left navigation - right content) - bottom (bottom).

<HeaderSection></HeaderSection>
   <div>
      <NavList class="nav"></NavList>
      <router-view  class="router"></router-view>
   </div>
<FooterSection></FooterSection>

6. Navigation on the left side is implemented with elementUI. There is a NavMenu navigation menu for navigation.

Let's introduce elementUI here:

(1) installation

   　npm i element-ui -S

(2) use

Add the following code to main.js:

　　import ElementUI from 'element-ui';

　　import 'element-ui/lib/theme-chalk/index.css';

　　Vue.use(ElementUI);

The code of the navigation bar is as follows:

<el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#324157"
                 text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router>
    <template v-for="item in items">
       <template v-if="item.subs">
          <el-submenu :index="item.index" :key="item.index">
             <template slot="title">
               <i :class="item.icon"></i><span slot="title">{{ item.title }}</span>
             </template>
             <template v-for="subItem in item.subs">
                <el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
                   <template slot="title">{{ subItem.title }}</template>
                   <el-menu-item v-for="(threeItem,i) in subItem.subs" :key="i" :index="threeItem.index">
                     {{ threeItem.title }}
                   </el-menu-item>
                </el-submenu>
                <el-menu-item v-else :index="subItem.index" :key="subItem.index">
                   {{ subItem.title }}
                </el-menu-item>
             </template>
         </el-submenu>
      </template>
      <template v-else>
          <el-menu-item :index="item.index" :key="item.index">
              <i :class="item.icon"></i><span slot="title">{{ item.title }}</span>
          </el-menu-item>
      </template>
  </template>
</el-menu>

Define the display and icon of the left navigation. index is the only identification, and the path path is opened. Corresponding to the path in the router, the corresponding written page can be opened.

           items: [
                    {
                        icon: 'el-icon-share',
                        index: 'user',
                        title: 'System home page'
                    },
                    {
                        icon: 'el-icon-time',
                        index: 'profile',
                        title: 'Basic form'
                    },
                    {
                        icon: 'el-icon-bell',
                        index: '3',
                        title: 'Form correlation',
                        subs: [
                            {
                                index: 'form',
                                title: 'Basic form'
                            },
                            {
                                index: '3-2',
                                title: 'Three level menu',
                                subs: [
                                    {
                                        index: 'detail',
                                        title: 'Rich Text Editor '
                                    },
                                    {
                                        index: 'file',
                                        title: 'markdown editor'
                                    },
                                ]
                            },
                            {
                                index: 'profiles',
                                title: 'File upload'
                            }
                        ]
                    },
                ]

7. If the login page and the page that does not need routing are involved, it is necessary to define other path pages in the js file of router and "/", and then judge whether the access page is a routing page or a login page.