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

  • 相关阅读:
    解决“不是有效的win32应用程序”问题
    mysql 5.7 windows install
    Redis
    给 string 添加一个 GetInputStream 扩展方法
    定时任务为什么不用Timer
    怎样改动 VC6.0 4.0 2010 打印预览界面上的文字
    大数据时代的万象变化
    <监听器模式>在C++ 与 Java 之间实现的差异
    工厂模式之抽象工厂模式
    UIButton上字体的对齐方式
  • 原文地址:https://www.cnblogs.com/xiaoleilei123/p/11050345.html
Copyright © 2011-2022 走看看