At present, many background management systems adopt the layout of tab. The navigation bar is fixed on the left and the corresponding page is on the right. Each time you click the navigation title on the left, only the corresponding page on the right will switch. vue wants to do the tab. It is recommended to use < router link > < / router link > to achieve the effect of a tag, and then use < router View > < / router View > to achieve the effect of slot, Insert the corresponding page. See the following case for the specific implementation:

1. This is the page of the tab. The layout is mainly < router link: to = "a.url": key = "index" V-for = "(a, index) in data" > {a.title}} < / router link >, where to points to the path you want to jump, which is the key, and < router View > < / router View > is the place where other sub pages will be displayed

<template>
  <div class="index-box">
    <nav>
      <h1>Navigation</h1>
      <!-- All navigation titles, route jump and point -->
      <router-link :to="a.url" :key="index" v-for="(a,index) in Data">{{a.title}}</router-link>
    </nav>
    <div class="content">
      <!-- Route slot: location of route jump -->
      <router-view></router-view>
    </div>
 
  </div>
</template>
 
<script>
  import navData from "../../static/data/nav"
  export default {
    name: "Index",
    data(){
      return {
        Data:[]
      }
    },
    methods:{
      init(){
        this.Data = navData.navData;
      }
    },
    created(){
      this.init();
    }
  }
</script>
 
<style scoped>
  /* container */
  .index-box{
    width: 100%;
    height: 100%;
    background: #212224;
    display: flex;
  }
  /* Left Navigation Bar  */
  nav{
    width: 260px;
    height: 100%;
    background: #323437;
    overflow: hidden;
    float: left;
  }
  /* Navigation */
  nav h1{
    color: #f2ffff;
    margin: 10px 0 10px 10px;
  }
  /* Navigation title */
  nav a{
    display: block;
    width: 100%;
    height: 45px;
    color: #f2ffff;
    background: #2e3033;
    padding-left: 10px;
    line-height: 45px;
    font-size: 20px;
    margin-bottom: 10px;
  }
  /* Right content */
  .content{
    flex: 1;
    padding: 20px;
  }
</style>

2. Routing configuration

In this case, the page of my tab tab is displayed by default, so I use this page to configure the sub routes of other sub pages

If there are other requirements, you can configure sub routes where necessary

import Vue from 'vue'
import Router from 'vue-router'
// home page
import Tab from "../pages/Tab"
// Page one
import PageOne from "../pages/PageOne"
// Page 2
import PageTwo from "../pages/PageTwo"
// Page 3
import PageThree from "../pages/PageThree"
 
Vue.use(Router);
 
export default new Router({
 routes: [
  {
    // Default displayed page
    path: '/',
    name: 'Tab',
    component: Tab,
    children:[
      {  
        // Pages displayed by default in sub routes
        path: '',
        name: 'PageOne',
        component: PageOne
      },
      {
        path: 'PageTwo',
        name: 'PageTwo',
        component: PageTwo
      },
      {
        path: 'PageThree',
        name: 'PageThree',
        component: PageThree
      }
    ]
  }
 ]
})

Here is another case: for example, I display the login page by default. After login, I enter the home page, which is the layout of the tab, so I just need to configure the sub route for the home page

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
// Home page frame
import Index from "../pages/Index";
// home page
import FunctionsIndex from "../components/Functions/FunctionsIndex";
// Data source list
import FunctionsDbSource from "../components/Functions/FunctionsDbSource"
// Role management
import FunctionsRoleManagement from "../components/Functions/FunctionsRoleManagement"
// Sign in
import Login from "../pages/Login"
Vue.use(Router);
 
 
export default new Router({
 linkExactActiveClass: "act",
 mode: "history",
 routes: [
  {
   // home page
   path: '/Index',
   name: 'Index',
   component: Index,
   children: [
    {
     // The statistics page is displayed by default in the home page
     path: '',
     name: 'Total',
     component: FunctionsIndex
    },
    {
     path: 'DbSource',
     name: 'DbSource',
     component: FunctionsDbSource
    },
    {
     path: 'RoleManagement',
     name: 'RoleManagement',
     component: FunctionsRoleManagement
    }
   ]
  },
   // The login page is displayed by default
  {
   path: '/',
   name: 'Login',
   component: Login
  }
 ]
})

3. Configuration json file

Because the navigation title of the sidebar is different for each system, and there is no guarantee that it will not be added later, I recommend that the navigation title be proposed. At that time, just v-for loop < router link > (the specific operation of the loop returns to the first code block above), then introduce json in the tab page and assign it to the variable in data in vue method, After the creation, the calling method can be added, and then the navigation heading is added. It only needs to be added in json.

{
 "navData":[
 {
  "title":"Sub page 1",
  "url":"/"
 },
 {
  "title":"Sub page 2",
  "url":"/PageTwo"
 },
 {
  "title":"Sub page 3",
  "url":"/PageThree"
 }
 ]
}

4. After writing other pages, you can achieve this effect

<template>
  <h1>This is sub page 1, which is displayed by default</h1>
</template>
 
<script>
  export default {
    name: "PageOne"
  }
</script>
 
<style scoped>
  h1{
    color: #f2ffff;
  }
</style>