Vue Router4与Router3路由配置与区别说明

npm install vue-router@3

npm install vue-router@4

// router/index.js  
import Vue from 'vue'  
import Router from 'vue-router'  
import Home from '../views/Home.vue'  
import About from '../views/About.vue'  
  
Vue.use(Router)  

const routes = [  
  {  
    path: '/',  
    name: 'Home',  
    component: Home  
  },  
  {  
    path: '/about',  
    name: 'About',  
    component: About  
  }  
]  

export default new Router({  // 区别1
  mode: 'history',  // 区别2
  base: process.env.BASE_URL,  
  routes 
})

// main.js  
import Vue from 'vue'  
import App from './App.vue'  
import router from './router'  
  
new Vue({  
  router,  
  render: h => h(App)  
}).$mount('#app')  // 区别3  

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'  
import Home from '../views/Home.vue'  
import About from '../views/About.vue'  
  
const routes = [  
  {  
    path: '/',  
    name: 'Home',  
    component: Home  
  },  
  {  
    path: '/about',  
    name: 'About',  
    component: About  
  }  
]  
  
const router = createRouter({  // 区别1
  history: createWebHistory(process.env.BASE_URL),  // 区别2
  routes  
})  
  
export default router

// main.js  
import { createApp } from 'vue'  
import App from './App.vue'  
import router from './router'  
  
const app = createApp(App)  
app.use(router)  // 区别3  
app.mount('#app')