首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue-router路由的传参params query

关于vue-router路由的传参方式params query

2023-10-08 08:49:15 作者：Morning_xx

这篇文章主要介绍了关于vue-router路由的传参方式params query,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue-router路由的传参方式params query

1.$router 和 $route的区别

$router : 路由操作对象、操作路由、包括路由的跳转方法，钩子函数等、只写对象;
$route : 路由信息对象、获取路由信息、包括path，params，hash，query，fullPath，matched，name等路由信息参数、只读对象;

//操作 路由跳转
this.$router.push({
    name:'hello',
    params:{
        name:'word',
        age:'11'
    }    
})
//读取 路由参数接收
this.name = this.$route.params.name;
this.age = this.$route.param.age;

2.query传参

path配合
刷新页面参数不丢失

//query传参，使用path跳转
this.$router.push({
    path:'second',
    query:{
        queryId:'20230129',
        queryName:'Emma'
}
)}
//query传参接受
this.quertId = ths.$route.query.queryId
this.queryName = this.$route.query.queryName

3.params传参

和name配合
刷新页面参数会丢失

//params传参，使用name
this.$router.push({
    name:'second',
    params:{
        Id:'20230129',
        Name:'Emma'
}
)}
//query传参接受
this.Id = ths.$route.params.Id
this.Name = this.$route.params.Name 
//路由
{
path:'/second/:id/:name',
name:'second',
component:() => import('@/view/second')
}

vue-router路由传参，如果没参数的话就跳转回来

if (JSON.stringify(this.$route.params) == '{}') {
    this.$router.go(-1)
}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。