面试遇到的问题面试问到一个很简单的问题吧，大概意思就是问有一个电影列表，点击每一个电影，进入详情页面，详情页面是一个单独

面试问到一个很简单的问题吧，大概意思就是问有一个电影列表，点击每一个电影，进入详情页面，详情页面是一个单独的组件，靠每一个传送过来的id值进行详情页面的渲染，现在有这个一个问题，当点击第一个电影，进来的时候是电影1的详情页面，然后点击第二个电影，进来还是电影1的详情页面，问：为什么会出现这样的情况，如何解决？不知道我这样理解是不是对的，也许我的理解有点偏，反正面试是凉了，😄

这是测试的代码github.com/isprodigal/…

//路由配置接受一个id值
 const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path:'/move/:id',
      component: () => import('./beforeRouteUpdate/move')
    }
  ]
})

<template>  
   <div id="app">    
     <img alt="Vue logo" src="./assets/logo.png" />    
     <p>针对mounted钩子和created钩子只在页面第一次加载后才能调用出来</p>    
     <p>只要el被加载过，之后的重复加载该页面就不会调用该钩子了</p>   
     <p>使用beforeRouteUpdate重新调用钩子</p> 
     <p>在当前路由改变，但是该组件被复用时调用</p>  
     <p>对于一个带有动态参数的路径/move/:id，在 /move/1 和 /move/2 之间跳转的时候</p>   
     <p>由于会渲染同样的move组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。</p>  
     <p>点击同一模块根据不同的情况拿取不同的数据</p>   
     <router-link to="/move/1">电影1详情</router-link>  
     <p></p>    
     <router-link to="/move/2">电影2详情</router-link> 
     <p></p>    
     <router-link to="/move/3">电影3详情</router-link>
     <router-view></router-view>  
  </div>
</template>

<template>  
   <div class="move">   
     <p>{{msg}}页面</p>  
   </div>
</template>
<script>
  export default {
    name: "move",  
    data() {   
       return {
          msg: {}
      };  
   },  
// created() {    
//      this.msg = this.getId(this.$route.params.id); 
   },    
   mounted() {   
     this.msg = this.getId(this.$route.params.id);    
  },  
  beforeRouteUpdate(to, from, next) {  
   this.msg = this.getId(to.params.id); 
   next(); 
 }, 
 methods: {   
   getId(id) {   
      switch (id) {   
         case "1":     
           return { id: 1, name: "电影1的详情" };  
         case "2":        
           return { id: 2, name: "电影2的详情" };       
         case "3":      
           return { id: 3, name: "电影3的详情" };   
        }   
   }  
}};