vue引入子路由 及其使用场景

定义子路由

//router.js

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: resolve=>(require(["@/components/HelloWorld"],resolve)),
    },
    {
      path:'/user',
      name:'user',
      component:user,
      children:[
        {
          path: '',
          name: 'info',
          component:resolve=>(require(["@/components/info"],resolve))
        },
        {
          path: 'message',
          name: 'message',
          component:resolve=>(require(["@/components/message"],resolve))
        }
      ]
    }

  ]
})

使用场景

//user.vue

<template>
 	<div class="hello">
        <div class="nav">
            <router-link class="item" :to="{name: 'info'}" >个人信息</router-link>
            <router-link class="item" :to="{name: 'message'}" >我的消息</router-link>
        </div>
     
        <div class="content" style="background:#eee;padding: 100px;">
            <router-view></router-view>
        </div>
    </div>
</template>