vuejs中的编程式导航Vs声明式导航

快速导航

• vuejs中的编程式导航Vs声明式导航
• 快速导航
• 前言
• 具体的实现
  • this.$router.push(path)
  • this.$router.replace(path)
  • this.$router.forward
  • this.$router.back
  • this.$router.go
• 总结

前言

在vue当中实现链接的跳转,通过使用的是vue提供的router-link标签,并结合to属性去跳转,这种可直接在模板中进行使用

我们称为它是声明式的导航,但有时,我们项目里,写的不是router-link而是一个button组件,或是需要有一定的异步逻辑处理,同样要实现跳转

那么这个时候,router-link就无法满足实现了的,这时候编程式导航就可以满足我们的需求的

它等价于router-link,是vue提供的一种通过调用vue实例API的方法实现的,它的概念名字比较抽象,你可以把编程式导航理解成,它是通过js的方式去实现类似router-link的功能不

不借助router-link的方式实现链接跳转，而是通过Vue实例的方法实现跳转

使路由的跳转更加灵活,自由

具体的实现

其实,编程式导航非常简单,是使用Vue的两个实例方法this.$router.push和this.$router.replace实现的

this.$router.push(path)

点击路由链接,可以返回到当前的路由界面,它是一种队列方式呈现的,先进先出

this.$router.push({
    name: '路由规则配置的名字'  // 定义在路由规则的name名字,保持一致,而非定义组件时的name名字,
    params: {                // 如果是query形式,那么这里就是query
        id:'11',
        name: 'itclan.cn'
    }
})

this.$router.replace(path)

用心的路由去替换当前的路由,也就是没有历史记录,前进和后退,没法返回到当前路由界面,它是以栈的方式呈现的,先进后出

this.$router.replace({
    name: '路由规则配置的名字',
    params: {
        id:'22',
        name: 'itclanCoder'
    }
})

this.$router.forward

this.$router.forward()表示前进

this.$router.back

this.$router.back() // 表示后退

this.$router.go

this.$router.go(正数/负数),若为正数,则表示前进几步,若为负数,则后退几步

总结

总得来说,在vue当中实现路由的跳转,有两种方式,一种是声明式router-link的方式,另一种就是通过vue的实例方法this.$router.push或this.$router.replace实现

前者具备历史的前进和后退,默认就是这种方式,而后者是替换当前的路由

非常简单

分享到 0

分享

留言

解答

收藏