一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第19天，点击查看活动详情。
router和路由
在setup中因为没有this的概念，所以我们无法使用this.$router和this.route去访问路由器和当前路由对象，但是vue3提供了useRouter和useRoute两个组合API函数，用来获取路由器对象和当前路由对象。其中route是一个响应式地对象，它的任何属性都可以被用来监听，我们也可以去避免route对象的整个监听。组件内导航守卫可以和setup函数一起使用。vue router将beforeRouteUpdate和beforeRouteLeave两个守卫公开为组合API函数。除此之外还有RouterLink这个组合API函数。
import { useRouter, userRoute } from 'vue-router'
export default {
setup() {
const router = useRouter()
const route = useRoute()
function warTest(test) {
router.push({
name: 'zss',
test: {
...route.test
}
})
}
}
}
我们在页面超过可视化窗口时，会显示滚动条，当我们将滚动条滚动到某个位置之后，如果我们想要切换视图时，让页面回到顶部或者保持在原来的位置。我们使用scrollBehavior()函数。这个函数会返回一个滚动位置对象用于新页面的滚动位置。接收三个参数，前两个是to和from路由对象，第三个参数是位置，只有在浏览器的前进和后退时才会触发。返回的位置对象中有left和top两个属性，left表示沿着x轴滚动窗口或者元素的像素数，top表示沿着Y轴滚动窗口或者元素的像素点。如果我们想要所有的路由导航都滚动到顶部，返回值可以设置为top: 0。除此之外我们还可以通过el属性传递css选择器或者dom元素，这样的话，顶部和左侧将会被作为相对于这个元素的相对偏移量，如果返回的一个值为false或者一个空对象，那么滚动条就不会发生滚动行为。如果想要模拟锚点的行为可以使用to.hash，如果想要浏览器支持平滑的滚动效果，可以设置为behavior: smooth，如果我们想要滚动之前等待转换完成，我们可以返回一个Promise，然后设置setTimeout为等待时间，最后返回需要滚动的位置即可。我们需要注意的是这个方法，只等在history.pushState的浏览器中去使用。
当我们添加的路由命名与现在已经存在的路由名称有冲突时，那么就会先删除路由，再添加路由。如果使用removeRoute()函数想要避免名称冲突时，可以在路由中使用Symbol作为名称，如果一个路由下面有子路由，那么我们删除这个路由时，所有的子路由和别名都会被删除。路由中提供了查看路由的方法，检查路由是否存在使用hasRoute()。获取包含所有路由记录的数组使用getRoutes()。
