vue 实现页面跳转
vue 实现页面跳转的方法
在 Vue 中实现页面跳转主要通过路由（Vue Router）完成，以下是几种常见的方式：
声明式导航（模板中使用 <router-link>）
在模板中直接使用 <router-link> 组件实现跳转，适用于需要渲染为 <a> 标签的场景。
<router-link to="/home">跳转到首页</router-link>可以传递动态参数：
<router-link :to="{ name: 'user', params: { userId: 123 }}">用户页面</router-link>编程式导航（通过 this.$router）
在 JavaScript 代码中通过 this.$router 的 API 实现跳转。
跳转到指定路径：
this.$router.push('/home')跳转并传递参数（对象形式）：
this.$router.push({ path: '/user', query: { id: 1 } })使用命名路由跳转：
this.$router.push({ name: 'user', params: { userId: 123 } })替换当前路由（不保留历史记录）：
this.$router.replace('/login')返回上一页：
this.$router.go(-1)路由传参方式
params 传参
需在路由配置中定义参数：
{ path: '/user/:userId', name: 'user', component: User }跳转时通过 params 传递：
this.$router.push({ name: 'user', params: { userId: 123 } })query 传参
通过 URL 查询参数传递：
this.$router.push({ path: '/user', query: { id: 1 } })URL 会显示为 /user?id=1。
路由配置示例
确保已在项目中安装并配置 Vue Router：
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import User from './views/User.vue'
Vue.use(Router)
export default new Router({
routes: [
{ path: '/home', component: Home },
{ path: '/user/:id', component: User }
]
})注意事项
- 使用
params时需在路由配置中声明参数（如/user/:id），否则刷新页面后参数会丢失。 query参数会显示在 URL 中，适合需要分享或书签的场景。- 编程式导航在 Vue 3 的组合式 API 中可通过
useRouter调用：import { useRouter } from 'vue-router' const router = useRouter() router.push('/path')
