详解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实例中。


 

你可能感兴趣的:(vue.js,javascript,前端)