持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第31天，点击查看活动详情juejin.cn/post/714765…
vue2对应vue-router3版本路由，vue3对应vue-router4版本路由
路由动画
<router-view v-slot="{Component,toute}">
<transtion :name="route.meta.transition || 'fade'">
<Component :is="component"/>
</transition>
</router-view>
可以在afterEach（）{}动态添加meta属性
强制在复用的视图之间进行过渡
给动态组件添加key值。key可以=to.path，因为如果是同一个组件，传的参数不一样，会就地复用，不会重新渲染组件。加了key值以后，就不会就地复用。
相对偏移量
具体用法：找到相对于的元素，然后设置top（Y轴）、left（X轴）、的值。
动态路由（vue-router4新增）
添加路由
- 用法：只在路由的routes里配置了两个路由，当我符合某些条件的时候调用addRoute动态的添加路由。
router.addRoute( {path:'/about', component:About} )
删除路由
- 方法一：通过调用router.addRoute()返回的回调：
const removeRoute = route.addRoute()
removeRoute()
删除指定的路由
removeRoute('about')
- 方法二：利用router.removeRouter('路由名')；不带
/ - 方法三：利用新添加的路由覆盖以前的路由，如果新添加的路由
name和以前的name名称相同，那么会覆盖以前的而路由 如果是动态路由，就需要通过push()和replace（）进行跳转。 Vue Router 提供了两个功能来查看现有的路由：
router.hasRoute()：检查路由是否存在。router.getRoutes()：获取一个包含所有路由记录的数组。
vuex（vue2对应vuex3，vue3对应vuex4）
- 创建：新建文件夹，通过
const store = createStore（）创建store对象，把store对象暴露，在main.js里，把store通过app.use(store)注入进去。 - 选项式直接把store放到new Vue的实例上
new Vue({
el: '#app',
store: store,//作为main.js里的new Vue的属性
})
- vue3的选项式API里依然用this.$store访问，组合式API里用useStore()，该方法得到一个对象——store，然后可以通过store.state访问状态。
- 派发
action通过store.dispatch() - 提交
mutations通过store.commit() state读取，依然使用list:computed(（）=> store.state.变量名)，computed得到的是一个计算属性ref，具有响应式。getters读取，使用info：computed(（）=>store.getters.变量名)
