Router

router.go() //在历史记录上倒退（填0刷新页面）
router.push() // 跳转页面

name和params搭配使用 path和query搭配使用

不传参
router.push('/user')

query:参数在问号后面
router.push({ path: '/user', query: { username: 'Jack' } })

params:参数在地址路由里
/path/:name/:id
vue2
this.$router.push({
    name:'name', //注意：这是组件的名字而不是路径
    params:{
        name:'xx',
        id:'111'
    }
})

全局路由守卫

beforeEach给单独的路由添加路由守卫，由于vue3没有beforeRouteEnter所以只能用这个

vue3
routes.beforeEach((to,from) =>{
    return false //返回false以取消导航
})
routes.afterEach((to,from) =>{
})

路由钩子函数

vue2
beforeRouteEnter(to, from, next) { 
    console.log("beforeRouteEnter"); 
    next(); 
}, 
beforeRouteUpdate(to, from, next) { 
    console.log("beforeRouteUpdate"); 
    next(); 
},
beforeRouteLeave(to, from, next) {
    console.log("beforeRouteLeave"); 
    next(); 
},

vue3移除了beforeRouteEnter
onBeforeRouteLeave((to, from, next) => {}) onBeforeRouteUpdate((to, from, next) => {})

动态路由

当我们做用户权限的时候，添加/移除路由非常有用

router.addRoute({ path: '/about', name: 'about', component: About })
router.removeRoute()

过渡效果 vue2可以直接包裹router-view标签 vue3需要使用v-slot，且被router-view包裹

vue2 使用transition标签
<transition> <router-view></router-view> </transition>

vue3使用v-slot搭配transition
<router-view v-slot="{ Component }">
  <transition name="fade">
    <component :is="Component" />
  </transition>
</router-view>

keep-alive 与过渡效果(transition)同理。 vue2可以直接包裹router-view标签 vue3需要使用v-slot，且被router-view包裹

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

nextTick

使用场景：数据源刷新但是页面没有刷新

vue2
this.$nextTick(() =>{})
vue3
import {nextTick} from vue
nextTick(()=>{})

vue2 $attrs

子组件接收所有父组件中未被props传递的数据

父组件：
<div class="demo-component" :style="styleObject" v-bind="$attrs">{{ message }}</div>

子组件：
console.log(this.$attrs.customAttribute);

vue3 watch watchEffect

watchEffect

-和 computed 对比，相当于没有返回值的 computed，当然也不能 set。

-和 watch 对比，可以自动收集依赖，无需手动指定。

computed会自动侦听使用到的数据并且返回值，watchEffect也会自动侦听但是不会返回值，但是会像watch一样执行函数，也就是自动的watch。

vue2中data是函数

当一个组件在页面上被多次使用时，我们需要让这几个组件当中的数据互相隔离，不能相互影响。

由于JS中对象只是引用对象空间的地址，所以如果data是对象，会让相同引用的组件的数据指向同一个对象空间，修改其中一个数据会影响对象空间的数据从而影响其他组件。

如果是函数，则会在组件创建时，创建一个新的对象空间，来保证多次引用也不会互相影响。