VueJs中的编程式导航VS声明式导航

在页面中去跳转,这种可直接在模板中进行使用

我们称为它是声明式的导航,但有时,我们项目里,写的不是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(配置参数)

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

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

this.$router.replace(配置参数)

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

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实现

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

非常简单，在平时的Vue项目开发中,声明式的导航使用很频繁,但是对于编程式的导航相对而言,没那么熟悉

虽然也知道怎么使用,但是往往在面试时,提到编程式导航,对于有的同学有些懵逼

可能不知不觉就已经使用了的,只是对于它的叫法有些陌生,两种方式还是都要知道的,对应着不同的应用场景