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上面显示出你的参数,并且当你跳到别的页面或者刷新页面的时候参数会丢失,要怎么解决?

  • 相关阅读:
    算法之路 level 01 problem set
    算法原理与实践(链表)
    散列表(HashTable)
    系统设计与实践(实战演练)
    桶排序 + 基数排序
    算法原理与实践(二叉树)
    Total Difference String
    【翻译】std::list::remove
    【翻译】std::remove
    Observer模式实践
  • 原文地址:https://www.cnblogs.com/xiaoleilei123/p/11050345.html
Copyright © 2011-2022 走看看