在
前端开发中，使用路由进行
页面跳转是构建单页应用（SPA）的核心功能之一。常见的
前端框架如 Vue 和 React 都提供了强大的路由库来实现这一功能。以下是如何在 Vue 和 React 中使用路由
跳转到
新页面的方法。
### Vue 中使用 Vue
Router 进行
页面跳转
Vue 官方推荐的路由库是 [Vue
Router](https://
router.vuejs
.org/)，它支持声明式导航和编程式导航两种方式来实现
页面跳转。
#### 1
. 声明式导航（使用 `<
router-link>`）
```html
<
router-link to="/about">前往关于
页面</
router-link>
```
该方式类似于 HTML 中的 `<a>` 标签，但专为 Vue
Router 设计，点击链接会自动更
新当前路径并渲染对应的组件。
#### 2
. 编程式导航（使用 `
router.push` 或 `
router.replace`）
可以在
JavaScript 中通过调用 `
router.push` 来实现
页面跳转：
```
javascript
this.$router.push('/about');
```
也可以传递命名路由的方式：
```
javascript
this.$router.push({ name: 'about' });
```
如果希望
跳转时不产生历史
记录，可以使用 `
router.replace`：
```
javascript
this.$router.replace('/contact');
```
#### 3
. 解决
页面滚动行为问题
Vue
Router 默认在
页面跳转后不会自动滚动到顶部，这可能导致
页面打开时定位在底部。可以通过配置 `scrollBehavior` 来解决这一问题：
```
javascript
const
router = new Vue
Router({
routes,
scrollBehavior(to, from, savedPosition) {
return { x: 0, y: 0 };
}
});
```
这样每次
页面跳转后都会自动滚动到顶部[^1]。
---
### React 中使用 React
Router 进行
页面跳转
React 官方推荐的路由库是 [React
Router](https://react
router.com/)，它提供了 `<Link>`、`useNavigate` 等工具来实现
页面跳转。
#### 1
. 声明式导航（使用 `<Link>`）
```jsx
import { Link } from 'react-
router-dom';
<Link to="/about">前往关于
页面</Link>
```
`<Link>` 是 React
Router 提供的用于声明式导航的组件，点击链接会
跳转到指定路径。
#### 2
. 编程式导航（使用 `useNavigate`）
在函数组件中，可以使用 `useNavigate` Hook 来实现编程式导航：
```jsx
import { useNavigate } from 'react-
router-dom';
function Home() {
const navigate = useNavigate();
const goToAbout = () => {
navigate('/about');
};
return <button onClick={goToAbout}>前往关于
页面</button>;
}
```
也可以通过 `navigate(-1)` 实现返回上一页等操作。
#### 3
. 页面滚动行为控制
React
Router v6 提供了 `<ScrollRestoration>` 组件用于控制
页面滚动行为：
```jsx
import { ScrollRestoration } from 'react-
router-dom';
function App() {
return (
<>
{/* 路由内容 */}
<ScrollRestoration behavior="auto" />
</>
);
}
```
设置 `behavior="auto"` 可以让
页面在导航时自动滚动到顶部或之前的位置[^2]。
---
### 样式作用域问题（Vue 特有）
在 Vue3 中，如果路由
跳转后
页面样式错乱，可能是由于全局样式污染导致的。可以通过在 `<style>` 标签中添加 `scoped` 属性来限定样式的作用域：
```html
<style scoped>
.example {
color: red;
}
</style>
```
这样定义的样式只会在当前组件中生效，避免与其他组件的样式冲突[^3]。
---
### 总结
- 在 Vue 中使用 Vue
Router，通过 `<
router-link>` 或 `
router.push` 实现
跳转，并通过 `scrollBehavior` 控制滚动行为。
- 在 React 中使用 React
Router，通过 `<Link>` 或 `useNavigate` 实现
跳转，并通过 `<ScrollRestoration>` 控制滚动行为。
- Vue3 中可以通过 `scoped` 属性避免样式污染。
---
本文介绍了在Vue.js应用中使用$this.$router.push进行当前页面跳转，以及结合$router.resolve和window.open实现新标签页打开页面的方法。这两种方式是前端路由管理中常见的页面导航策略。
扫一扫
2257
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
