vue借助于router实例方法实现编程式导航(back/forward/go/push/replace)

责编:menVScode 2017-12-06 17:12 阅读(1810)

编程式导航

        借助于 router 的实例方法,通过编写代码来实现导航的切换。

back:回退一步
forward:前进一步
go:指定前进/回退的步数
push:导航到不同的 url,向 history 栈添加一个新的记录
replace:导航到不同 url,替换 history 栈中当前记录

        每一次点击链接都会把地址存在历史纪录栈。

QQ截图20171206152819

<div>
    <input type="button" value="后退" @click="backHandle" />
    <input type="button" value="前进" @click="forwardHandle" />
    <input type="button" value="控制前进后退的部署" @click="goHandle" />
    <input type="button" value="push" @click="pushHandle" />
    <input type="button" value="replace" @click="replaceHandle" />
</div>

js代码

methods:{
    backHandle(){//后退
      this.$router.back()
    },
    forwardHandle(){//前进
      this.$router.forward()
    },
    goHandle(){// go()参数为正数的时候是前进;负数的时候是后退;0的时候是刷新当前页面
      this.$router.go(-2)//后退两步
    },
    pushHandle(){
      //this.$router.push('/user')
      this.$router.push({path:'/user',query:{name:'2222'}})//跳到指定的链接,并在history栈中添加记录
    },
    replaceHandle(){
      this.$router.replace({path:'/user'})//跳到指定的链接,并替换 history 栈中当前记录
      // 比如:'/home'、'/about'、'replace({path:'/user'}',这时候点击后退按钮,显示的是'/home'
    }
  }
标签: router 编程式 vue
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码