官方网址:

Vue4.x： https://router.vuejs.org/zh/introduction.html
Vue3.x: https://v3.router.vuejs.org/zh/installation.html
迁移文档： https://router.vuejs.org/zh/guide/migration/index.html
Vuex4.x: https://vuex.vuejs.org/zh/
Vuex3.x： https://v3.vuex.vuejs.org/zh/
迁移文档： https://vuex.vuejs.org/zh/guide/migrating-to-4-0-from-3-x.html

一、VueRouter4.x 变化

• new VueRouter() 修改为 createRouter()

• mode配置 修改为history

* createWebHashHistory-> hash
* createWebHistory-> history
* createMemoryHistory -> abstract

• base配置 修改为createWebHistory这些函数的第一个参数传递.

const router = createRouter({
history: createWebHistory('/admin/'), // base 作为首个参数传入
routes,
})

• fallback属性废弃,3.x中默认为true

• 删除了 *（星标或通配符）路由,改为自定义的regex参数：

{ path: '/:pathMatch(.*)*', name: 'not-found', component: NotFound }

• 6、滚动行为：x,y 改为left,top

const router = createRouter({
history: createWebHistory('/admin/'), // base 作为首个参数传入
routes,
scrollBehavior(ot,from ,savedPosition){
if(savedPosition){
return savedPosition
}else {
return { left: 0, top: 0 }
}
}
})

示例

3.x路由常用配置 示例:

4.x路由常用配置 示例:

• transition 和 keep-alive 现在必须通过 v-slot API 在 RouterView 内部使用：

//beofore
<keep-alive>
  <router-view></router-view>
</keep-alive>

//Now
 <router-view v-slot="{Component}">
    <keep-alive>
      <component :is="Component"></component>
    </keep-alive>
  </router-view>

• 删除了router-link中的tag、event、exact、append等属性。

• 忽略 mixins 中的导航守卫

• 删除 router.match 改为 router.resolve

• 删除 router.getMatchedComponents()

router.currentRoute.value.matched 获取

• 所有的导航现在都是异步的

• 跳转或解析不存在的命名路由会产生错误

• options 中需要配置 routes必须配置

• 其他 ....

二、Vuex 4.x 变化

Vuex 3.x 示例

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})