vue中路由跳转的多种方式(和$router下路由跳转的那几个方法的区别)

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

1.  声明式导航

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

<router-link to="/home">Home</router-link>

2.  编程式导航

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

// 导航到指定的路由
this.$router.push('/home')
// 替换当前路由
this.$router.replace('/home')
// 后退一步
this.$router.go(-1)

3.  路由传参

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

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

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

4.  命名路由

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

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

<router-link :to="{ name: 'user', params: { id: userId }}">User</router-link>

以上是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实例中。

到此这篇关于vue中路由跳转的几种方式（和$router下路由跳转的那几个方法的区别）的文章就介绍到这了,更多相关vue路由跳转内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论