全局注入$router,可以在组件的setup()函数中导入并使用
时间: 2024-11-17 13:28:08 浏览: 4
vue3.x+vite+ts+vue-router@4.x 路由使用demo
在Vue 3中,全局注入依赖如`$router`或`$store`,是为了在所有组件中都能方便地访问这些服务。要在组件的`setup()`函数中引入和使用`$router`,你需要这样做:
首先,确保已经安装了Vue Router,并且在main.js或其他合适的配置文件中创建并导出了`$router`实例。
然后,在每个组件的`setup()`函数里,可以像下面这样导入和使用`$router`:
```typescript
import { ref, onMounted } from 'vue';
import router from './your-router-file';
setup() {
const routerRef = ref(router); // 创建一个ref引用router
onMounted(() => {
routerRef.value.isReady().then(() => {
// 当路由准备就绪时,你可以在这里开始使用$router
routerRef.value.push('/your-path');
});
});
return {
router: routerRef,
// ...其他组件数据和方法
};
}
```
在这个例子中,我们创建了一个`routerRef`,并在组件挂载时检查路由是否准备好。一旦准备好,就可以使用`routerRef.value.push('/your-path')`来进行导航。
阅读全文