Vue学习第28天——路由传参（query参数和params参数）详解及案例

离奇6厘米

已于 2022-09-28 20:53:35 修改

阅读量3.4k

点赞数 3

分类专栏： vue 文章标签：学习 javascript vue 前端

于 2022-09-22 22:26:01 首次发布

本文链接：https://blog.csdn.net/Vest_er/article/details/126981463

版权

vue 专栏收录该内容

37 篇文章 13 订阅

订阅专栏

一、路由的query参数

1、传递参数

① 字符串写法

<router-link  :to="`/cats/detail?age=${cat.name}&age=${cat.age}&sex=${cat.sex}`">详细信息</router-link>

② 对象写法

<router-link :to="{
   path:'/cats/detail',
   query:{
     name:cat.name,
     age:cat.age,
     sex:cat.sex
   }
 }"
>详细信息</router-link>

2、接收参数

$route.query.xxx

3、特点

路径后面有？出现，表示是query传参

二、query传参案例

案例中包括多级路由的练习

App组件

<template>
  <div id="app">
      <School/>
      <router-link to="/cats">猫咪信息展示</router-link>&ensp;&ensp;
      <router-link to="/dogs">狗狗信息展示</router-link>
      <router-view></router-view>
  </div>
</template>

<script>
import School from './components/School.vue'

export default {
  components: { School },
  name: 'App',
}
</script>
<style>
  a {
    text-decoration: none;
  }
</style>

components/School组件

<template>
  <div>
    <p>学校名称：{{name}}</p>
    <p>学校地址：{{adress}}</p>
  </div>
</template>

<script>
export default {
  name:"School",
  data(){
    return {
      name:"喵喵学院",
      adress:"郑州"
    }
  },
}
</script>

router/index.js

import Vue from "vue";
import VueRouter  from "vue-router";

Vue.use(VueRouter);

import Cats from "../pages/Cats";
import Dogs from "../pages/Dogs";
import Detail from "../pages/Detail"

export default new VueRouter({
    routes:[
        //一级路由
        {
            path:'/cats',
            component:Cats,
            //二级路由
            children:[
                {
                    path:'detail',
                    component:Detail,
                }
            ]
        },
        {
            path:'/dogs',
            component:Dogs
        }
    ]
})

pages/Dogs组件

<template>
  <div>
    <p>狗狗姓名：{{name}}</p>
    <p>狗狗年龄：{{age}}</p>
  </div>
</template>

<script>
export default {
  name:"Dogs",
  data(){
    return {
      name:"三蹦",
      age:"3岁"
    }
  },
}
</script>

pages/Cats组件

<template>
  <div>
    <ul>
      <li v-for="(cat,index) in cats" :key="index">
        <p>喵喵名：{{cat.name}}
          <!-- 第一种方法：字符串传参 -->
          <!-- <router-link :to="`/cats/detail/?name=${cat.name}&age=${cat.age}&sex=${cat.sex}`">详细信息</router-link> -->
          <!-- 第二种方法：对象传参 -->
          <router-link :to="{
            path:'/cats/detail',
            query:{
              name:cat.name,
              age:cat.age,
              sex:cat.sex
            }
          }">详细信息</router-link>
        </p>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name:"Cats",
  data(){
    return {
      cats:[{
        name:"憨瓜",
        age:"3岁",
        sex:"公"
      },{
        name:"波妞",
        age:"3岁",
        sex:"母",
      }]
    }
  },
}
</script>

pages/Detail组件

<template>
  <div>
    <p>姓名：{{$route.query.name}}，年龄：{{$route.query.age}}，性别：{{$route.query.sex}}，已绝育，育苗已打</p>
  </div>
</template>

<script>
export default {
  name:"Detail",
}
</script>

运行结果
在这里插入图片描述

三、路由命名

1、作用

可以简化路由的跳转（只有路径过长时，使用路由命名才有优势）

2、使用方法

name:'xxx'

{
	//给路由命名
	name:'xiangqing',
	path:'detail',
	component:Detail,
}

3、简化跳转

没有使用路由命名之前，我们要跳转的路径
<router-link to="/cats/detail">详细信息</router-link>
使用路由命名之后，我们要跳转的路径
<router-link :to="{name:'xiangqing'}">详细信息</router-link>

4、命名路由搭配query传参

 <router-link 
 	:to="{
	   name:'xiangqing',
	   query:{
	   		name:cat.name,
	     	age:cat.age,
	      	sex:cat.sex
       }
    }"
>详细信息</router-link>

5、命名路由搭配params传参

先看完四——路由params参数再看这条，写在这里是为了与4query传参对比，可以看出命名路由搭配params传参与命名路由搭配query传参用法类似

 <router-link 
 	:to="{
	      name:'xiangqing',
	      params:{
	      	name:cat.name,
	      	age:cat.age,
	     	sex:cat.sex
	     }
	 }"
>详细信息</router-link>

四、路由的params参数

1、配置路由，声明params传参

通过占位符声明params传参

{
	name:'xiangqing',
	//通过占位符声明接收params参数
	path:'detail/:name/:age/:sex',
	component:Detail,
}

2、传递参数

① 字符串写法

<router-link :to="`/cats/detail/${cat.name}/${cat.age}/${cat.sex}`">详细信息</router-link>

② 对象写法

<router-link 
	:to="{
       name:'xiangqing',
       params:{
	       name:cat.name,
	       age:cat.age,
	       sex:cat.sex
  	   }
 	}" 
 >详细信息</router-link>

3、接收参数

$route.params.xxx

五、路由params传参与query传参代码对比

其他代码相同，变更代码对比
router/index.js代码变更对比

//接收query参数
children:[
	{
		path:'detail',
		component:Detail,
	}
]

//声明接收params
children:[
       {
           //开启命名空间
           name:'xiangqing',
           //占位符声明params参数
           path:'detail/:name/:age/:sex',
           component:Detail,
       }
   ]

Detail代码变更对比

<!-- query传参 -->
<p>姓名：{{$route.query.name}}，年龄：{{$route.query.age}}，性别：{{$route.query.sex}}，已绝育，育苗已打</p>

<!-- params传参 -->
<p>姓名：{{$route.params.name}}，年龄：{{$route.params.age}}，性别：{{$route.params.sex}}，已绝育，育苗已打</p>

Cats路由变更代码对比

<!-- query传参第一种方法：字符串传参 -->
<router-link :to="`/cats/detail/?name=${cat.name}&age=${cat.age}&sex=${cat.sex}`">详细信息</router-link>
<!-- query传参第二种方法：对象传参 -->
<router-link 
	:to="{
		path:'/cats/detail',
		query:{
			name:cat.name,
			age:cat.age,
			sex:cat.sex
		}
	}"
>详细信息</router-link>

<!-- params传参第一种方法：字符串传参 -->
<router-link :to="`/cats/detail/${cat.name}/${cat.age}/${cat.sex}`">详细信息</router-link>
<!-- params传参第二种方法：对象传参 -->
<router-link 
	:to="{
		name:'xiangqing',
		params:{
			name:cat.name,
			age:cat.age,
			sex:cat.sex
		}
	}"
>详细信息</router-link>

六、总结

1、query传参需要在路径中使用？声明

2、params传参需要现在路由中使用占位符声明

3、query传参对象写法

 <router-link 
 	:to="{
	      path:'/cats/detail',
	      query:{
	      	name:cat.name,
	      	age:cat.age,
	      	sex:cat.sex
     	  }
	}"
>详细信息</router-link>

4、params传参对象写法

 <router-link 
 	:to="{
	      name:'xiangqing',
	      params:{
	      	name:cat.name,
	      	age:cat.age,
	      	sex:cat.sex
      }
	}"
>详细信息</router-link>

5、路由携带params参数时，若router-link中的to使用对象写法，则不能使用path配置项，必须使用路由命名name配置项（不可以用path和params配置的组合, 只能用name和params配置的组合）

6、可以在配置路由params传参时，在占位的后面加上一个 ？号，代表params 参数可传可不传

{
    name:"miaomiao"
    path:"/cats/:id?",
    component:Cats,
},