详解vue中路由跳转的几种方式（和$router下路由跳转的那几个方法的区别）

Vue.js是一款流行的前端JavaScript框架，它提供了多种方式来实现路由跳转。以下是其中几种常见的方式：

1.  声明式导航

在Vue的模板中，可以使用``标签来创建链接。该标签会被渲染为一个``标签，点击它时，它将导航到指定的路由

Home

2.  编程式导航

在Vue实例中，可以使用`$router`对象来实现编程式导航，该对象提供了一些方法，如`push`、`replace`、`go`等。```

// 导航到指定的路由
this.$router.push('/home')

// 替换当前路由
this.$router.replace('/home')

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

3.  路由传参

在声明式导航和编程式导航中，可以通过`to`属性或方法的第二个参数来传递参数。

User

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

4.  命名路由

在Vue路由中，可以给路由配置一个唯一的名称，以方便在模板中使用。

{
  path: '/user/:id',
  name: 'user',
  component: User
}

User

以上是Vue中几种常见的路由跳转方式，通过它们，可以方便地实现路由之间的切换和传参。

===============================================

在Vue.js中，$router是Vue Router插件注入到Vue实例中的路由实例，它提供了几个方法来进行编程式导航，这些方法的区别如下

1.  $router.push(location, onComplete?, onAbort?)

`push`方法会在浏览器的历史记录中添加一条新的记录，当用户点击浏览器的后退按钮时，可以回退到之前的页面。同时，也可以在`push`方法中传递一个回调函数，在路由导航完成时执行。```

// 导航到指定的路由
this.$router.push('/home')

// 导航到命名路由
this.$router.push({ name: 'user', params: { userId: 123 }})

// 添加回调函数
this.$router.push('/home', () => {
  console.log('路由导航完成')
})

2.  $router.replace(location, onComplete?, onAbort?)

`replace`方法与`push`方法类似，也可以用来导航到指定的路由，但它不会在浏览器的历史记录中添加一条新的记录，而是替换当前的记录。当用户点击浏览器的后退按钮时，会跳转到上一个页面而不是当前页面的前一个。```

// 替换当前路由
this.$router.replace('/home')

// 替换命名路由
this.$router.replace({ name: 'user', params: { userId: 123 }})

// 添加回调函数
this.$router.replace('/home', () => {
  console.log('路由导航完成')
})

```
3.  $router.go(n)

`go`方法用来在浏览器的历史记录中前进或后退指定的步数，参数n可以是正数或负数，正数表示前进，负数表示后退。```

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

// 前进两步
this.$router.go(2)

```
以上三个方法都是用来进行编程式导航的，但它们的行为略有不同，根据具体的需求选择使用。需要注意的是，在使用这些方法时，需要确保路由实例已经创建并注入到Vue实例中。