Vue3 Help

1、注意事项

Ⅰ、

路由跳转使用useRouter或者useRoute时，必须在setup的顶层作用域使用不可以在函数内部使用。

// 正确写法
<script setup>
import { useRouter } from 'vue-router';
const router = useRouter()
const pushIndex = ()=>{
	router.push({path:'/index'})
}
</script>
// 错误写法 
<script setup>
import { useRouter } from 'vue-router';
const pushIndex = ()=>{
	useRouter().push({path:'/index'}) //此时的useRouter()是undefined
}
</script>

路由跳转也可以直接import router的index.js来使用

import router from '../router'
const pushIndex = ()=>{
	router.push({path:'/index'})  // 此时的router可以在任何地方使用
}

Ⅱ、

获取当前的路由的两种方法

方法一
import router from '../router'
const currentRoute = router.currentRoute.value
方法二
import { useRoute } from 'vue-router'
const currentRoutePath = useRoute().path
const currentRouteParams = useRoute().params