2-2 nav,tab-bar组件放在App.vue

一、App.vue

<template>
  <div id="app">
    <Header></Header>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
    <tab-bar></tab-bar>
  </div>
</template>
<script>
import Header from "@/components/Header";
import TabBar from "@/components/TabBar";
export default {
  name: "Movie",
  components: {
    Header,
    TabBar
  }
};
</script>

二、TabBar.vue使用vuex传参

<router-link tag="li" to="/movie" @click.native="handleMovie" >
    <i class="iconfont icondianying1"></i>
    <p>电影</p>
</router-link>

methods:{
        handleMovie(){
            this.$store.commit("changeTitle","豆瓣电影")
        }
}

三、/movie路由重定向/movie/inTheaters

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')
        },{
            path:'/movie',
            redirect:'/movie/inTheaters'
        }
    ]
}