• vue实现路由跳转的方法


    router-link跳转

            router-link是vue中提供的一种跳转页面的相关方式

    1.其中router-link中使用v-bind绑定了一个对象(其实也可以理解成路由跳转的目的地)

    2.其中有两种跳转方法,1-利用你的路由名字来进行跳转(推荐跳转的方法)  2-利用路由的path来进行跳转,但使用这种方法来进行跳转有注意事项//注意:利用path跳转的时候的前面的/表明的是从根路由开始找 如果没加/则从当前路由开始找。
    //就没有像使用第一种跳转时那么方便## this.$router.replace() ## this.$router.go()

    1. //router-link跳转
    2. <router-link :to="{ name: 'teacher' }">跳转到老师页面(name跳转)</router-link>
    3. <router-link :to="{ path: '/teacher' }">跳转到老师页面(path跳转)</router-link>

     this.$router.push()跳转

    通常这种跳转都是结合方法进行相关的跳转的,其中的核心部分就是如下:

    1. this.$router.push({name:'home'})
    2. //通常用于与后台数据进行交互是的跳转,因为可以人为的设置跳转的目的地
    3. ##this.$router.replace()
    4. ## this.$router.go()

     this.$router.replace()

    //这种方法和上面的push的用法相同,都是可以进入指定的url页面
    this.$router.push({name:'home'})//但不同点就在于是 push简而言之就是入栈,即通过push这种方法进行的跳转会将跳转的记录压入history中,这样当用户点击浏览器的返回上一页的时候就能准确的回到上一页。但使用replace这种方法就无法达到上一种的效果,他会直接返回发起跳转时页面的上一个页面。类似于向前回滚2次
    //通常用于与后台数据进行交互是的跳转,因为可以人为的设置跳转的目的地.

    this.$router.go()

            从这个函数的名字是不难看出 go 即为跳转.相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。正数返回上一个页面

    1. this.$router.go(1) //回到上一页 history.forward()
    2. this.$router.go(-1) //回到下一页 history.back()
    3. //但其中的数字也不可能无限大或者无线小 当数字超过history中记录的就会失败
    4. this.$router.go(10000) //将不会进行相关跳转 //但不同点就在于是 push简而言之就是入栈,即通过push这种方法进行的跳转会将跳转的记录压入history中,这样当用户点击浏览器的返回上一页的时候就能准确的回到上一页。但使用replace这种方法就无法达到上一种的效果,他会直接返回发起跳转时页面的上一个页面。类似于向前回滚2
    5. //通常用于与后台数据进行交互是的跳转,因为可以人为的设置跳转的目的地
  • 相关阅读:
    【Opencv入门到项目实战】(九):项目实战|信用卡识别|模板匹配|(附代码解读)
    gitignore文件的语法规则
    apk反编译修改教程系列-----修改apk中的图片 任意更换apk桌面图片【三】
    生产队有没有驴,我说的算
    java计算机毕业设计某高校学生成绩信息管理系统源码+程序+lw文档+mysql数据库
    分组排序取第一条数据 SQL写法
    Greatest element and least element
    2023年【氧化工艺】考试内容及氧化工艺操作证考试
    十年老程序员的职场教训,很受用
    使用 Rust 开发:以太坊与 Layer2 生态建设新趋势
  • 原文地址:https://blog.csdn.net/hulinhulin/article/details/132818492