vue3 中 watch 监控当前 router

vue3 中 watch 监控当前 router

需求：在开发过程中，router 匹配当前导航栏，并将指定导航栏进行高亮显示。

主要问题：实时获取当前路由数据，实时更新数据 selectedKeys

解决方案：使用vue3中的 useRouter 进行判断匹配，使用 watch 进行监控，代码如下

<template>
	<div>
    	<span>{{ selectedKeys }}</span>
    </div>
</template>
<script>
    import { reactive, toRefs, watch, ref } from 'vue';
    import { useRouter } from 'vue-router';
	export default {
        setup () {
            let state = reactive({
                theme: 'light',
                collapsed: false,
                selectedKeys: [],
                openKeysChange: [],
                preOpenKeys: [],
            })
            /**
            * 使用watch监控当前 router 的变化
            */
            const useRouterCurrent = reactive(useRouter());
		    watch(useRouterCurrent, o => {
      			state.selectedKeys.splice(0, 1, o.currentRoute.name);
		    });
            return {
                ...toRefs(state),
            }
        }
    }
</script>

参考链接：vue3 watch 文档