Vue 路由 跳转【返回、刷新、跳转】

this.$router.go(-1)

原页面表单中的内容会丢失;
向前或者向后跳转n个页面,n可为正整数或负整数

this.$router.go(-1):后退+刷新

this.$router.go(0):刷新;

this.$router.go(1) :前进

this.$router.back()

原页表表单中的内容会保留

this.$router.back():后退 ;

this.$router.back(0) 刷新;

this.$router.back(1):前进

this.$router.push

跳转到指定url路径,并想history栈中添加一个记录,点击后退会返回到上一个页面

1. 不带参数

  • this.$router.push(’/home’)
  • this.$router.push({name:‘home’})
  • this.$router.push({path:’/home’})

2. query传参

  • this.$router.push({name:‘home’,query: {id:‘1’}})
  • this.$router.push({path:’/home’,query: {id:‘1’}})
  • html 取参 $route.query.id
    script 取参 this.$route.query.id

3. params传参

  • this.$router.push({name:‘home’,params: {id:‘1’}}) // 只能用 name
  • 路由配置 path: “/home/:id” 或者 path: “/home:id” ,
    不配置path ,第一次可请求,刷新页面id会消失
    配置path,刷新页面id会保留
    html 取参 $route.params.id
    script 取参 this.$route.params.id

4. query和params区别

  • query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传,
  • params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失,密码之类还是用params刷新页面

this.$router.replace

跳转到指定url路径,但是history栈中不会有记录,点击返回会跳转到上上个页面 (就是直接替换了当前页面)【A----->B----->C 结果B被C替换 A----->C)】

用法同 this.$router.push
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐