vuejs2 - How do I do to make multi-pages switch smoothly in Vue.js with a navigation bar? How to router in MPA project?

Question

I'm learning Vue.js 2.6.Here is my basic directory:

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?

To make this project I turned to some case on the internet, after that I was confused when I saw its Router file structure:

It seems that I'm coding it as a MPA, but why is that index.js in Routers dir needed?

my home.js as below:

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: '<Home/>',
    render:h => h(Home)
});

my index.js in Router dir as below:

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
    }
  ]
})

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.

main.js:

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: '<App/>'
})

new Vue({
  el: '#app',
  render:h => h(App)
})

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?

THX

question from:https://stackoverflow.com/questions/65881424/how-do-i-do-to-make-multi-pages-switch-smoothly-in-vue-js-with-a-navigation-bar

Answer 1

You have multiple questions being asked here.

1. What is the best router structure for vue-router?

   I don't think there is a standard anywhere. A lot of codes I have seen adopted the style you have already. Which is fine depending on the scale of what you are building.

2. How to make a smooth transition between pages?

   In my projects, I wrap the router-view component in the official vue transition component. As advised here in the official vue router documentation

Please let me know if these answers suffice.