Vue-路由传参query与params

2019/05/13 17:21
阅读数 13

注明: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     

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部