搭建VUE项目路由嵌套需要注意的几点

搭建VUE项目需要注意的几点

路由嵌套

一：templete标签下只能有一个容器

第一层 App.vue

<template>
  <div id="app">
    <!--<img src="./assets/logo.png">-->
    app
    <router-view/>
  </div>
</template>

第二层 index.vue(自己命名)

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

第三层 main.vue(自己命名)

<template>
    <div>
      我爱vue
    </div>
</template>

二：route里面

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/components/index'
import Main from '@/components/main/main'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/index',
      name: 'index',
      component: Index,
      children:[
        {
          path: 'main',
          component: Main
        }
      ]
    },
  ]
})

需要注意：children中的path不需要加上/

再看页面效果

后续会继续补充