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')