vue如何实现路由跳转

Vue 路由跳转的实现方法

在 Vue 中，路由跳转可以通过 vue-router 实现。以下是几种常见的路由跳转方式：

声明式导航（模板中使用 <router-link>）

通过 <router-link> 组件实现路由跳转，适合在模板中使用：

<router-link to="/home">跳转到首页</router-link>

可以添加动态路径参数：

<router-link :to="{ name: 'user', params: { userId: 123 }}">用户详情</router-link>

编程式导航（通过 JavaScript 代码）

在组件方法中调用 this.$router.push 实现跳转：

this.$router.push('/home')

或使用命名路由和参数：

this.$router.push({ name: 'user', params: { userId: 123 } })

替换当前路由（不保留历史记录）

使用 this.$router.replace 替换当前路由，不会在历史记录中留下条目：

this.$router.replace('/login')

前进或后退

在历史记录中前进或后退指定步数：

this.$router.go(1)  // 前进一步
this.$router.go(-1) // 后退一步

路由传参方式

通过 params 传递参数（需在路由配置中定义）：

// 路由配置
{ path: '/user/:userId', name: 'user', component: User }

// 跳转时传递参数
this.$router.push({ name: 'user', params: { userId: 123 } })

通过 query 传递 URL 查询参数：

this.$router.push({ path: '/user', query: { userId: 123 } })

路由配置示例

确保在项目中已安装并配置 vue-router：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('./views/About.vue')
    }
  ]
})

动态路由匹配

在路由路径中使用动态字段：

{
  path: '/user/:id',
  component: User,
  props: true // 将参数作为 props 传递给组件
}

在组件中通过 this.$route.params.id 或 props 接收参数。