router跳转的几种方式

悟能不能悟2025-12-05 12:01

Router 既可以 push name 也可以 push path，两种方式都是有效的。以下是具体说明：

1. 使用 path 跳转

复制代码

// 直接使用路径字符串
this.$router.push('/user/123')

// 使用 path 对象
this.$router.push({
  path: '/user/123'
})

// 带查询参数
this.$router.push({
  path: '/user',
  query: {
    id: 123,
    name: 'john'
  }
})

2. 使用 name 跳转

复制代码

// 使用路由名称
this.$router.push({
  name: 'user',
  params: {
    id: 123
  }
})

// 结合 params 和 query
this.$router.push({
  name: 'user',
  params: {
    id: 123
  },
  query: {
    tab: 'profile'
  }
})

3. 路由配置示例

复制代码

// router.js
const routes = [
  {
    path: '/user/:id',
    name: 'user',  // 路由名称
    component: User
  },
  {
    path: '/about',
    name: 'about',
    component: About
  }
]

4. 两种方式的区别

特性	path	name
参数传递	主要通过 query	主要通过 params
URL 显示	query 参数显示在 URL 上	params 参数在路径中或隐藏
硬编码	路径改变需更新所有引用	只需维护路由配置
动态路由		需要完整路径

5. 使用建议

推荐使用 name：更易于维护，路径变化时只需修改路由配置
需要显式 URL 参数时：使用 path + query
RESTful 风格路由：使用 name + params

// 推荐：使用 name
this.$router.push({ name: 'user', params: { id: 123 } })

// 特定场景：需要完整 URL 时使用 path
this.$router.push({ path: '/search', query: { q: 'vue' } })

总之，router 支持两种方式，根据具体需求选择合适的方法。