详解vue 路由跳转四种方式 (带参数)

在vue中，路由跳转是非常常见的操作，我们可以使用vue-router提供的四种方式进行路由跳转。本文将详细讲解这四种方式，并提供带参数的示例。

1. router.push

使用router.push可以向路由添加一个新的历史记录，这意味着用户可以使用浏览器的后退按钮回到之前的页面。这种方式常用于页面跳转或者在当前页面中动态添加一个子组件。

示例：

<template>
  <button @click="navigateToDetails">跳转到详情页</button>
</template>

<script>
export default {
  methods: {
    navigateToDetails() {
      this.$router.push('/details')
    }
  }
}
</script>

2. router.replace

使用router.replace可以将当前路由替换为新的路由，不会添加一个新的历史记录，这意味着用户不能通过后退按钮返回上一个页面。这种方式常用于前往登录页面或者密码重置页面等。

示例：

<template>
  <button @click="navigateToLogin">前往登录页</button>
</template>

<script>
export default {
  methods: {
    navigateToLogin() {
      this.$router.replace('/login')
    }
  }
}
</script>

3. router.go

使用router.go可以在当前历史记录中前进或后退多少步，可以接收一个数值作为参数，正数表示前进，负数表示后退。

示例：

<template>
  <button @click="goBack">返回上一页</button>
</template>

<script>
export default {
  methods: {
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

4. router.push命名路由

使用命名路由可以方便地跳转到一个已经定义的路由，并且可以传递参数。我们需要在路由定义时设置路由的name属性，然后在代码中使用该名称进行跳转，并且可以传递参数。

示例：

路由定义：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      name: 'user',
      component: () => import('@/views/user/User.vue')
    }
  ]
})

使用命名路由跳转：

<template>
  <button @click="navigateToUser">跳转到用户页面</button>
</template>

<script>
export default {
  methods: {
    navigateToUser() {
      this.$router.push({ name: 'user', params: { id: 1 }})
    }
  }
}
</script>

以上就是vue-router提供的四种路由跳转方式，希望能对你有所帮助。