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()​​。