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

最新推荐文章于 2023-07-21 15:50:34 发布

itclanCoder

最新推荐文章于 2023-07-21 15:50:34 发布

阅读量587

点赞数

文章标签： java vue javascript 编程语言 spring

本文链接：https://blog.csdn.net/wzc_coder/article/details/125903817

版权

虽互不曾谋面,但希望能和您成为笔尖下的朋友

以读书,技术,生活为主,偶尔撒点鸡汤

不作,不敷衍,意在真诚吐露,用心分享

点击左上方,可关注本刊

标星公众号（ID：itclanCoder）

如果不知道如何操作

点击这里,标星不迷路

前言

在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(配置参数)

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

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'
    }
})

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项目开发中,声明式的导航使用很频繁,但是对于编程式的导航相对而言,没那么熟悉

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

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

vuejs中路由的传参以及路由props配置

第1节-从0到1快速建设网站-最终实现商业化盈利

2022-07-09

点个在看你最好看

点击下方阅读原文可了解更多

itclanCoder

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
VueJs中的编程式导航VS声明式导航

虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号（ID：itclanCoder）如果不知道如何操作点击这里,标星不迷路前言在vue当中实现链接的跳转,通过使用的是vue提供的router-link标签,并结合to属性去跳转,这种可直接在模板中进行使用我们称为它是声明式的导航,...
复制链接

扫一扫