一、新建详情页组件

views/Movie/detail.vue

技术要点: 1.vuex改变Header组件 2.设置容器的样式

  1. <template>
  3.     <div id="detailContainer">
  4.         <Header>
  5.             <i class="iconfont">&#xe605;</i>
  6.         </Header>
  7.         <div class="content-wrap">
  8.             电影详情
  9.         </div>
  10.     </div>
  11. </template>
  13. <script>
  14. import Header from '@/components/Header'
  15. export default {
  16.     name:'Detail',
  17.     components:{
  18.         Header
  19.     },
  20.     mounted(){
  21.         this.$store.commit("changeTitle","电影详情")
  22.     }
  23. }
  24. </script>
  26. <style scoped>
  27. #detailContainer{
  28.     position:absolute;
  29.     left:0;
  30.     top:0;
  31.     z-index: 100;
  32.     width:100%;
  33.     min-height: 100%;
  34.     background: #fff;
  36. }
  37. .iconfont{
  38.     position: absolute;
  39.     left:20px;
  40.     font-size: 50px;
  41. }
  42. .content-wrap{
  43.     margin-top: 100px;
  44. }
  45. </style>

二、设置命名视图

我们现在需要在/movie路由下再去设置一个路由。movie的同级已经有了其他的路由视图了,现在是想在movie的同级显示其他的视图路由。就可以使用命名路由

  1. //views/Movie/components/MovieNav.vue
  2.         <div class="content">
  3.         <div class="menu">
  4.           <router-link to="/movie/city" class="city" tag="div">
  5.             <span>{{this.$store.state.city}}</span>
  6.             <i class="iconfont iconlower-triangle"></i>
  7.           </router-link>
  8.           <router-link to="/movie/inTheaters" class="in-theaters" tag="div">
  9.             <p>正在热映</p>
  10.           </router-link>
  11.           <router-link to="/movie/comingSoon" class="即将上映" tag="div">
  12.             <p>即将上映</p>
  13.           </router-link>
  14.           <router-link to="/movie/search" class="search" tag="div">
  15.             <i class="iconfont iconsoushuo"></i>
  16.           </router-link>
  17.         </div>
  18.         <keep-alive>
  19.           <router-view></router-view>
  20.         </keep-alive>
  21.                 //命名路由设置到这里
  22.         <router-view name="detail"></router-view>
  23.       </div>

三、配置路由

  1. //routers/movie/index.js
  2. {
  3.             path:'detail',
  4.             components:{
  5.                 detail:()=>import('@/views/Movie/detail')
  6.             }
  7. }