vue routing--Detailed explanation of website navigation function

1. First, you need to follow Vue router to support it

npm install vue-router
Then need to introduce it in the project:

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

2. Define the router's js file

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'

(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

import router from './router'

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

4. Define router-view on the entry page

<div >
 <router-view></router-view>
 </div>

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

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

6. The left navigation is implemented using elementUI. There is a NavMenu navigation menu that provides navigation functions.

Here is a reference to introducing elementUI:

(1) Installation

npm i element-ui -S

(2) Use

Add the following code to:

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/';

(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="">
   <el-submenu :index="" :key="">
    <template slot="title">
    <i :class=""></i><span slot="title">{{  }}</span>
    </template>
    <template v-for="subItem in ">
    <el-submenu v-if="" :index="" :key="">
     <template slot="title">{{  }}</template>
     <el-menu-item v-for="(threeItem,i) in " :key="i" :index="">
      {{  }}
     </el-menu-item>
    </el-submenu>
    <el-menu-item v-else :index="" :key="">
     {{  }}
    </el-menu-item>
    </template>
   </el-submenu>
  </template>
  <template v-else>
   <el-menu-item :index="" :key="">
    <i :class=""></i><span slot="title">{{  }}</span>
   </el-menu-item>
  </template>
 </template>
</el-menu>

Define the display and icons of the navigation on the left. Index is a unique identifier. The path is opened, corresponding to the path in the router. You can open the corresponding page written.

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 Related',
      subs: [
       {
        index: 'form',
        title: 'Basic Form'
       },
       {
        index: '3-2',
        title: 'Level 3 Menu',
        subs: [
         {
          index: 'detail',
          title: 'Rich Text Editor'
         },
         {
          index: 'file',
          title: 'markdown editor'
         },
        ]
       },
       {
        index: 'profiles',
        title: 'File Upload'
       }
      ]
     },
    ]

7. If it involves login pages and pages that do not require routing, you need to define other paths in the router's js file, and then determine whether the page is routed or login pages.

The above is the vue route introduced by the editor to you - the detailed explanation and integration of the website navigation function. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!