이 vue 예에서는 콘텐츠를 어떻게 표시합니까?

나는 처음으로 vue로 놀고 있으며 간단한 테스트 파일을 작성했습니다. API 호출의 데이터로 채워진 테이블이 있고 각 라우터에 대한 링크를 만들려면 라우터를 사용했지만이 링크는 내용을 표시하지 않습니다. 네트워크가 API에 요청을하고 있음을 보여 주지만 어떤 이유로 템플릿이 표시되지 않습니다 (심지어 하드 코딩 된 콘텐츠조차도). 왜? 또한 경로 내용이 첫 번째 라우터보기에는 표시되지 않고 tbl 구성 요소의 라우터보기에만 표시되는 이유는 무엇입니까? 난 당신이 뷰 인스턴스의 아이디어를 오해 생각이 vue 예에서는 콘텐츠를 어떻게 표시합니까?

<!doctype html> 
<html lang="en"> 
<head> 
    <title>Vue.js test</title> 
    <meta charset="utf-8"> 
</head> 
<body> 
    <div id="app"> 
     <!-- this route displays correctly --> 
     <router-link to="/foo">Go to Foo</router-link> 
     <table-notification/> 
      <!-- content is not displayed here - why? --> 
      <router-view></router-view> 
    </div> 

    <script src="https://unpkg.com/vue"></script> 
    <script src="https://unpkg.com/vue-router"></script> 
    <script src="axios.min.js"></script> 

    <script>  
     const foo = {template:'<div>asdfasdf</div>',}; 

     var router = new VueRouter({ 
      routes: [ 
       {path: '/foo', component: foo}, 
       {path: '/notifications/:id', component: notification_view} 
      ] 
     }); 

     var app = new Vue({ 
      router: router 
     }).$mount('#app'); 

     var notification_view = new Vue({ 
      router: router, 
      template: ` 
       <div>iop 
        id: {{ obj.id}}<br/> 
        title: {{ obj.data.title}}<br/> 
        message: {{obj.data.message}}<br/> 
       </div>  
      `, 

      data: { 
       obj: {}, 
       id: 0, 
      }, 

      watch: { 
       '$route' (to, from) { 
        // check for id in url 
        if (this.$route.params.id) 
         this.update_notification(); 
       } 
      }, 

      methods: { 
       update_notification: function(){ 
        this.id = this.$route.params.id; 
        axios.get('http://api2/notifications/' + this.id) 
         .then(response => {this.obj = response.data.packet;}); 
       } 
      } 
     }); 

     var tbl = new Vue({ 
      router:router, 
      el: 'table-notification', 
      template: ` 
      <div> 
       <table> 
        <tr> 
         <th>Title</th> 
         <th>Created</th> 
         <th>Actions</th> 
        </tr> 
        <tr v-for="obj in objects"> 
         <td><router-link :to="link(obj)">{{obj.data.title}}</router-link></td> 
         <td>{{obj.created}}</td> 
         <td>actions</td> 
        </tr> 
       </table> 
       <router-view/> 
       <!-- why must router-view be here, and why isn't notification_view showing any output?--> 
      </div> 
      `, 
      methods: { 
       link: function(obj) {return '/notifications/' + obj.id;} 
      }, 

      data: { 
       objects: [], 
      }, 

      created: function(){ 
       axios.get('http://api2/notifications'). 
        then(response => 
        { 
         this.objects = response.data.packet; 
        }); 
      } 


     }); 
    </script> 
</body> 
</html>

출처

2017-10-29 user3791372