回答

1、创建方式

4.x用法

createRouter

用来创建router对象

import { createRouter } from "vue-router"
   const router = createRouter({options
})

3.x用法

import VueRouter from "vue-router"'
const router = new VueRouter({
// options
......
})

2、路由模式

4.x用法

createWebHashHistory (hash)

createWebHashHistory (history)

import {
createRouter,
createWebHashHistory,
createWebHashHistory
} from 'vue-router'

const router = createRouter({
    history:createWebHashHistory() // createWebHashHistory()
})

3.x用法

const router = new VueRouter({
   mode: 'hash' // 'history'
})

3、重定向

写法有所改变

4.x的写法

{
   path: '/:pathMatch(.*)*', // 需要使用正则去匹配
   redirect: Home,
}

3.x的写法

{
    path: '*',redirect: Home
}

4、挂载方式

因为vue3的composition api，vue-router的挂载方式以插件来挂载
4.x的用法

import { createApp } from 'vue'
import router from './router.js'
import App from './App.vue'
createApp(App).use(router).mount('#app');

3.x的用法，以属性的方式进行挂载

import router from './router.js'
new Vue({
  router
})

5、Router及Vuex组件中的使用

因为setup中不能访 this,所以提供两个api来获取 router 和 route ， useRouter() 和 useRoute()

4.x的用法

import { useRouter,useRoute } from "vue-router"
export default({ 
setup(){
const router = useRouter();
const route = useRoute();
   const linkToHome = () => {
     router.push({path:'/'})
  }
  return{
    linkToHome
   }
}
})

3.x的用法

export default({ 
    methods:{ 
      linkToHome(){ 
        this.$router.push({ path:'/' })
      }
   }
})

6、导航守卫

由于vue3 composition api的原因，beforeRouteUpdate 和 beforeRouteLeave被替换为 onBeforeRouteUpdate 和 onBeforeRouteLeave