vue路由跳转、传参和接收参数、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