title: How do I do to make multi-pages switch smoothly in Vue.js with a navigation bar? How to router in MPA project?
body: <p>I'm learning Vue.js 2.6.Here is my basic directory:</p>
  <p><a href="https://i.stack.imgur.com/jjeRk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jjeRk.png" alt="enter image description here" /></a></p>
  <p>I need my home and blogs shares the same header and footer, so I imported my header and footer components separately in my home.vue and blogs.vue, but It didn't switch page smoothly when I click the link in the navigation bar. What can I do to make it smooth?</p>
  <p>To make this project I turned to some case on the internet, after that I was confused when I saw its Router file structure:</p>
  <p><a href="https://i.stack.imgur.com/DemE5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DemE5.png" alt="enter image description here" /></a></p>
  <p>It seems that I'm coding it as a MPA, but why is that index.js in Routers dir needed?</p>
  <p>my home.js as below:</p>
  <pre><code>import Vue from 'vue'
  import Home from './home.vue'
  import router from '../../router'
  
  import ElementUI from 'element-ui'
  import 'element-ui/lib/theme-chalk/index.css'
  
  Vue.config.productionTip = false
  Vue.use(ElementUI)
  
  new Vue({
      el: '#homeDiv',
      router,
      components: { Home },
      template: '&lt;Home/&gt;',
      render:h =&gt; h(Home)
  });
  </code></pre>
  <p>my index.js in Router dir as below:</p>
  <pre><code>import Vue from 'vue'
  import Router from 'vue-router'
  import HelloWorld from 'HelloWorld'
  
  Vue.use(Router)
  
  export default new Router({
    mode: 'history',
    routes: [
      {
        path: '/',
        name: 'App',
        component: HelloWorld
      }
    ]
  })
  </code></pre>
  <p>and there's another main.js in the root of src dir, the author of that sample code did nothing to the initial App.vue and main.js. I just added some element-ui related code into index.js and main.js.</p>
  <p>main.js:</p>
  <pre><code>import Vue from 'vue';
  import App from './App';
  import router from './router';
  
  import ElementUI from 'element-ui';
  import 'element-ui/lib/theme-chalk/index.css';
  //import './plugins/element.js'
  
  Vue.config.productionTip = false;
  Vue.use(ElementUI);
  
  /* eslint-disable no-new */
  new Vue({
    el: '#app',
    router,
    components: { App },
    template: '&lt;App/&gt;'
  })
  
  new Vue({
    el: '#app',
    render:h =&gt; h(App)
  })
  </code></pre>
  <p>I felt its Router looks like spaghetti, I can't see which code is needed, which is not. What is a GOOD Router structure in a vue.js MPA project?</p>
  <p>THX</p>