2-1 电影路由组件拆分

/movie/city
/movie/search
/movie/inTheaters
/movie/comingSoon

一、在电影路由下配置子路由

1-1 配置子的路由组件

1-2 配置/movie子路由

//routers/movie/index.js
export default {
    path:'/movie',
    component:()=>import('@/views/Movie'),
    children:[
        {
            path:'city',
            component:()=>import('@/components/City')
        },
        {
            path:'inTheaters',
            component:()=>import('@/components/InTheaters')
        },
        {
            path:'search',
            component:()=>import('@/components/Search')
        },
        {
            path:'comingSoon',
            component:()=>import('@/components/ComingSoon')
        }
    ]
}

1-3 views/movie配置路由

//views/Movie/index.vue 配置子路由
<template>
  <div>
    <div>
      <Header title="豆瓣电影"></Header>
      <keep-alive>
          <router-view></router-view>
      </keep-alive>
      <tab-bar></tab-bar>
    </div>
  </div>
</template>

1-4 拆分组件

讲以下区域拆分为组件