vue component layout得侧边栏模板

router index

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '../view/worksheet/HelloWorld'
import practice from '../view/worksheet/practice'
import viewpac from '../view/worksheet/viewpac'
import Layout from '../view/layout/layout';
Vue.use(Router)

const vueRouter = new Router({
  routes: [
    {
      path: '/',
      redirect: '/practice',
      component: Layout,
      children: [
        {
          path: 'practice',
          name: 'practice',
          component: practice
        },
        {
          path: '/HelloWorld',
          name: 'HelloWorld',
          component: HelloWorld,
        },
        {
          path: '/viewpac',
          name: 'viewpac',
          component: viewpac
        }
      ]
    }
  ]
})

export default vueRouter

layout.vue

<template>
    <div>
      <navbar />
      <app-main />
    </div>
</template>

<script>
import AppMain from './index'
import Navbar from './nav'
export default {
  name: "layout",
  components: {AppMain, Navbar},
  data () {
    return {
      
    }
  }
}
</script>

nav.vue

<template>
  <div>
    <router-link to="/practice" key="1">练习</router-link>
    <router-link to="/HelloWorld" key="2">欢迎</router-link>
    <router-link to="/viewpac" key="3">欢迎内页</router-link>
  </div>
</template>

<script>
export default {
  name: "Navbar"
}

app-main 模板得 index

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

<script>
export default {
  name: "index"
}
</script>