Vue-路由传参query与params

注明：vue中 $router 和 $route 的区别

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

//操作 路由跳转
this.$router.push({
      name:'hello',
      params:{
          name:'word',
          age:'11'
     }
})

//读取 路由参数接收
this.name = this.$route.params.name;
this.age = this.$route.params.age;

1、query传参

query传参地址使用path（路由地址）和name（路由名称）

//传参，使用path跳转
this.$router.push({
    path:'/login',
    query: {
        id:'123',
        name: 'yangj'
    }
})

//路由
import Login from '@/page/Login'     

{
　　path: '/login',
　　name: 'Login',
　　component: 'Login'
}

//接收 
id = this.$route.query.id; name = this.$route.query.name;

//地址栏表现形式     这种方式感觉安全性不好暴露了参数，但是对于对隐私要求不强的页面可以这么玩
http://localhost:8080/#/Login?id=123&name=yangj

2、params传参

query传参地址使用name（路由名称）

//传参，使用name跳转
this.$router.push({
    name:'Login',
    params: {
        id:'123',
        name: 'yangj'
    }
})
//路由
import Login from '@/page/Login'
{
　　path: '/login/:id/:name', //这里的参数必须写（地址栏表现形式1），如果不写在页面强制刷新时参数会丢失（地址栏表现形式2）
　　name: 'Login',
　　component: 'Login'
}
//接收 
id = this.$route.params.id; name = this.$route.params.name;

//地址栏表现形式1
http://localhost:8080/#/login/123456/yangj

//地址栏表现形式2
http://localhost:8080/#/login

原文：https://blog.csdn.net/mf_717714/article/details/81945218