title: Vue Router with Render Template
body: <p>I'm a beginner used <strong>vue js</strong>. I tried <strong>vue router</strong> to navigation in my page. Everything went smoothly and easily. But I have a problem, when navigation need template to show page corresponding. Actually, I want my script neatly organized by splitting the file. Such as rooting itself , .html itself, etc. This is my script :</p>
  
  <p><strong>Route.js</strong></p>
  
  <pre><code>/* Configuration Routing */
  
  //const Home = { template: 'templates/home.html' }; 
  const Thread = { template: '&lt;div&gt;THREAD&lt;/div&gt;' }; 
  const Tag = { template: '&lt;div&gt;TAG&lt;/div&gt;' }; 
  const TrendingTag = { template: '&lt;div&gt;TRENDING TAG&lt;/div&gt;' }; 
  const Category = { template: '&lt;div&gt;CATEGORY&lt;/div&gt;' }; 
  const User = { template: '&lt;div&gt;USER&lt;/div&gt;' };
  
  const Home = Vue.component('home', function(resolve) {
      $.get('templates/home.html').done(function(template) {
        resolve({
          template: template,
          data: function () {
                  return {
                      message: 'Welcome'
                  };
              }
        });
      }); });
  
  //const Home = Vue.component('home', require('assets/js/controllers/home.js'));   
  
  const routes =  [
                        { path: '/', component: Home },
                        { path: '/thread', component: Thread },
                        { path: '/tag', component: Tag },
                        { path: '/trending-tag', component: TrendingTag },
                        { path: '/category', component: Category },
                        { path: '/user', component: User }
                      ];
  
  const router = new VueRouter({   mode: 'history',   routes });
  
  const app = new Vue({   router }).$mount('#app');
  </code></pre>
  
  <p>In this case, actually <strong>const home</strong> must exist in another file. Like <strong>home.js</strong>. Because I have to create data in <strong>home.js</strong>. </p>
  
  <p><strong>Home.js</strong></p>
  
  <pre><code>Vue.component('homepage', function(resolve) {
      $.get('templates/home.html').done(function(template) {
        resolve({
          template: template,
          data: function () {
                  return {
                    message: 'Welcome'
                  };
                }
        });
      });
  });
  </code></pre>
  
  <p><strong>home.html</strong></p>
  
  <pre><code>&lt;div id="homepage"&gt;
      &lt;template id="home"&gt;
          &lt;h3 class="page-title" id="content"&gt; {{ message }} &lt;/h3&gt;
      &lt;/template&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Can you help me please ? I really stuck with this case. Thank you.</p>