vue3+typescript中,useRouter如何使用?
时间: 2024-02-25 07:56:41 浏览: 93
在Vue 3中,使用TypeScript和Vue Router的话,可以采用如下的方式使用useRouter:
1. 首先,安装Vue Router和@types/vue-router:
```
npm install vue-router
npm install @types/vue-router -D
```
2. 在Vue组件中引入useRouter函数:
```
import { defineComponent, useRouter } from 'vue'
```
3. 在组件setup函数中调用useRouter函数获取路由实例:
```
export default defineComponent({
setup() {
const router = useRouter()
// ...
}
})
```
4. 接下来就可以使用该实例上的方法和属性了,例如:
```
// 获取当前路由路径
console.log(router.currentRoute.value.path)
// 跳转到指定路由
router.push('/home')
```
需要注意的是,如果在TypeScript中使用Vue Router,需要在Vue组件中声明router选项,例如:
```
import { defineComponent, useRouter } from 'vue'
import { RouteLocationNormalized } from 'vue-router'
export default defineComponent({
router: {},
setup() {
const router = useRouter()
// ...
}
})
```
这样就可以避免TypeScript的类型检查错误。
阅读全文