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

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


nav.vue

export default {
  name: "Navbar"
}</pre> 
  <pre>app-main     index</pre> 
  <pre><template>
    <div>
      <router-view/>
    </div>
</template>

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