###
页面跳转实现
方法
在
Vue.js 中实现
页面跳转通常依赖于
Vue Router，这是
Vue.js 的官方路由管理器。
Vue Router 允许开发者轻松地在单页应用中导航和管理多个视图。
#### 使用 `<router-link>` 组件
`<router-link>` 是
一个内置组件，用于创建导航链接。它默认渲染为
一个锚点 (`<a>`) 标签，并且会自动添加 `href` 属性。例如，要创建
一个指向 `/login` 的链接，可以这样写：
```html
<router-link to="/login">登录</router-link>
```
当用户点击这个链接时，
Vue Router 会处理导航，并显示相应的组件[^3]。
#### 使用 `this
.$router
.push()`
方法
除了使用 `<router-link>`，还可以通过
编程方式实现
页面跳转。这通常在
方法或生命周期钩子中完成。例如，在用户提交表单后，可以使用 `this
.$router
.push()`
方法跳转到
另一个页面：
```javascript
methods: {
goToLogin() {
this
.$router
.push('/login');
}
}
```
此外，还可以
传递参数进行
跳转。有两种方式可以
传递参数：`query` 和 `params`。`query` 会将
参数附加到 URL 上，而 `params` 则不会显示在 URL 中：
```javascript
methods: {
goToLoginWithParams() {
this
.$router
.push({ path: '/login', query: { userId: 123 } });
this
.$router
.push({ name: 'login', params: { userId: 123 } });
}
}
```
在上述代码中，`query` 会将 `userId`
参数附加到 URL 上，而 `params` 则不会显示在 URL 中，类似于 POST 请求的
参数传递方式[^3]。
### 创建登录
页面
为了创建
一个登录
页面，首先需要定义
一个 Vue 组件，该组件包含用户名和密码的输入框，以及
一个提交
按钮。以下是
一个简单的登录
页面示例：
```html
<template>
<div>
<h2>登录</h2>
<form @submit
.prevent="submitForm">
<div>
<label>用户名:</label>
<input type="text" v-model="username" required />
</div>
<div>
<label>密码:</label>
<input type="password" v-model="password" required />
</div>
<button type="submit">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
};
},
methods: {
submitForm() {
// 这
里可以添加验证逻辑
if (this
.username && this
.password) {
//
跳转到主页或其他
页面
this
.$router
.push('/');
} else {
alert('请输入用户名和密码');
}
}
}
};
</script>
```
在这个示例中，`v-model` 用于双向绑定输入框的
值，`@submit
.prevent` 用于阻止表单的默认提交行为，并调用 `submitForm`
方法。如果用户名和密码都已填写，用户将被重定向到主页；否则，会弹出提示框要求输入用户名和密码。
###
跳转到其他
页面
在登录成功后，可以使用 `this
.$router
.push()`
方法将用户重定向到主页或其他
页面。例如，假设主页的路径是 `/`，可以在 `submitForm`
方法中调用 `this
.$router
.push('/')` 来实现
跳转。
### 相关问题
1
. 如何在
Vue.js 中使用
Vue Router 实现动态路由？
2
. 如何在
Vue.js 中实现带
参数的
页面跳转？
3
. 如何在
Vue.js 中实现登录
页面的表单验证？
4
. 如何在
Vue.js 中实现登录
页面的验证码功能？
5
. 如何在
Vue.js 中实现登录
页面的记住我功能？
本文介绍了在Vue.js中如何使用Vue Router进行页面跳转并传递参数。内容包括通过路由参数和查询参数的方式传递数据，以及如何在组件中使用方法进行导航和获取参数。
订阅专栏 解锁全文
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
