zoukankan      html  css  js  c++  java
  • $router和$route的区别,路由跳转方式name 、 path 和传参方式params 、query的区别

    一、$router和$route的区别

    $router : 是路由操作对象,只写对象
    $route : 路由信息对象,只读对象

    例子:
    //$router操作 路由跳转

    this.$router.push({ name:'hello', params:{ name:'word', age:'11' } })

    //$route读取 路由参数接收

    var name = this.$route.params.name;

    二、路由跳转方式name 、 path 和传参方式params 、query的区别

    path 和 Name路由跳转方式,都可以用query传参
    例子:

    //Router.js
    {
    path: '/hello',
    name: 'HelloWorld',
    component: helloPage
    }
    跳转方式name
    this.$router.push({
    name: 'HelloWorld',
    query: {
    id: 12345
    }
    })
    跳转方式path
    this.$router.push({
    path: '/hello',
    query: {
    id: 12345
    }
    })
    
    //获取路由参数信息方式:
    {{$route.query.id}

    path路由跳转方式,params传参会被忽略,只能用name命名的方式跳转

    params传参,push里面只能是 name:'xxxx',不能是path:'/xxx',因为params只能用name来引入路由,如果这里写成了path,接收参数页面会是undefined!!!

    另外,二者还有点区别,直白的来说query相当于get请求,页面跳转的时候,可以在地址栏看到请求参数,而params相当于post请求,参数不会再地址栏中显示

    注意:params传参如果路由上面不写参数,也是可以传过去的,但不会在url上面显示出你的参数,并且当你跳到别的页面或者刷新页面的时候参数会丢失,要怎么解决?

  • 相关阅读:
    《分布式系统关注点——数据一致性(上篇)》阅读笔记
    2.23寒假学习记录
    2.22寒假学习记录
    2.21寒假学习记录
    2.20寒假学习记录
    2.19寒假学习记录
    2.18寒假学习记录
    2.17寒假学习记录
    2.17周一毕设改进计划
    2.16寒假学习记录
  • 原文地址:https://www.cnblogs.com/xiaoleilei123/p/11050345.html
Copyright © 2011-2022 走看看