vue路由跳转、传参和接收参数、query和params

文章目录

  • 一、路由跳转:
    • 1、router-link to属性设置跳转信息
      • to可以直接设置一个字符串,表示跳转的url地址
      • to可跟一个json对象
    • 2、编程式路由跳转
  • 二、路由传参
    • 使用query传参:
    • 使用params传参:
    • query传参和params传参区别:
  • 三、参数的接收
    • 由query传参接收时:
    • 由params传参接收时:

一、路由跳转:

1、router-link to属性设置跳转信息

标签代替超链接使用

to可以直接设置一个字符串,表示跳转的url地址

<router-link to="/showUsers"></router-link>

<router-link :to="'/updateUser?id='+user.id">修改</router-link>

to可跟一个json对象

 <router-link v-bind:to="{path:'/user',query:{name:'王华华',age:20}">用户管理</router-link>

说明:
to前面加上 v-bind: ,to里可以写入变量,否则只能写入字符,v-bind可以省略,只留 :to

2、编程式路由跳转

$router.push()
使用举例:


//使用query传参
this.$router.push({path:'/home',query: {id:'1'}})
this.$router.push({name:'home',query: {id:'1'}})
//使用params传参
this.$router.push({name:'home',params: {id:'1'}})

二、路由传参

两种传参方式:query、params

使用query传参:

在这里插入图片描述

使用params传参:

在这里插入图片描述

query传参和params传参区别:

  • params传参只能使用name,不可使用path;
  • query传参即可以使用name,也可以使用path
  • params传参数 ,类似post, 跳转之后页面 浏览器地址栏url后面不会拼接参数 , 但是刷新页面 id 会消失
  • query传参数 ,类似get,跳转之后页面 浏览器地址栏后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类要使用params

三、参数的接收

由query传参接收时:

//query传递参数(查询id为1的user)
<router-link to="{path:"/UserComponent",params:{id:1}}">查询</router-link>
//query接收参数
 userId=this.$router.query.id  //接受query里的参数赋值给userId

由params传参接收时:

//params传递参数(查询id为1的user)
<router-link to="{name:"UserComponent",params:{id:1}}">查询</router-link>
//params接收参数
 userId=this.$router.params.id  //接受query里的参数赋值给userId代码片
student={id:1.name:"wj"};
//传递参数student
<router-link to="{name:"UserComponent",params:student">查询</router-link>
//接受参数student
student2=this.$router.params

你可能感兴趣的:(Vue,vue.js,前端,javascript)