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: 'itclan.cn'
    }
})

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

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

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