如何监听history路由变化
时间: 2024-07-22 09:00:30 浏览: 56
在前端开发中,监听`history`路由变化通常是在单页应用程序(SPA)中实现的,特别是使用现代框架如React、Vue或Angular时。以下是一个简单的例子,展示了如何在这些框架中监听路由变化:
**React Router v6** (基于路径的API):
```jsx
import { useLocation } from 'react-router-dom';
function App() {
const location = useLocation();
useEffect(() => {
console.log('Route changed:', location.pathname);
// 在这里添加你想在路由改变时执行的任何代码
}, [location]);
return (
<Router>
{/* ...你的路由配置... */}
</Router>
);
}
```
**Vue Router**:
```js
import { useRoute } from 'vue-router';
export default {
setup() {
const route = useRoute();
onMounted(() => {
route.$on('update', (to) => {
console.log('Route updated:', to.path);
// 在这里添加你想在路由更新时执行的回调
});
});
return {
route,
};
},
}
```
**Angular Router**:
```typescript
import { Router } from '@angular/router';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
template: '<router-outlet></router-outlet>',
})
export class AppComponent implements OnInit {
constructor(private router: Router) {}
ngOnInit(): void {
this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
console.log('Route changed:', event.urlAfterRedirects);
// 在这里添加你想在路由变化后的回调
}
});
}
}
```
记得在每个框架的文档中查找完整的API和示例,因为API可能会有所变化。
阅读全文