params传参的写法
步骤1:定义路由规则
{
path: "/find/:name", // path:路由地址
component: Find // 展示Find这个组件
},
步骤2.传参,直接在路径后写要传入的参数
声明式导航写法:
<router-link to="/find/zs">张三详情</router-link>
编程式导航写法:
this.$router.push({
name: 'name',
params: { name: 'zs' }
})
步骤3:接收参数
<template>
<div>
<p>{{$route.params.name}}</p> //zs
</div>
</template>
以上是路由params传参的基本用法,接下来我们来聊聊params使用的过程中可能会出现的一些问题。
问题1:路由跳转传参时,path写法可以和params同时使用么?
答:路由跳转传参时,path写法不能与params参数同时使用,因为如果同时使用控制台会报 NavigationDuplicated: Avoided redundant navigation to current location的错误 所以使用params传参只能使用name写法。
问题2:当路由规则中定义了占位符时,发生路由跳转可以不使用params传参么?
答:不可以,由于使用params传惨需要在路径上添加占位符,所以如果在路由跳转时没有携带参数时跳转后的路径会有问题,这时可以在路由规则中 在占位的后面加一个问号,即代表该参数可传可不传
{
path: "/find/:name?", // path:路由地址
component: Find // 展示Find这个组件
}
问题3:当使用params传递一个空字符串时会发生什么?
答:当使用params传递一个空字符串是,跳转后的路径也会有问题,这时可以使用短路运算,如果没有值则传入undefined
this.$router.push({ name: 'search' }, params: { keyword:'' || undefined })
问题4:路由规则中可以传递 props么?
答:可以,总共有三种写法
第一种:布尔值写法
props:true
props值为布尔值,为true时,则把路由收到的所有params参数通过props传给组件
第二种:对象写法
props:{a:900}
props值为对象,该对象中所有的key-value的组合最终都会通过props传给组件
第三种:函数写法
props($route){
return {
id: $route.query.id,
title: $route.query.title
}
}
props值为函数,该函数返回的对象中每一组key-value都会通过props传给组件
使用时:
<template>
<ul>
<li>消息编号:{{ id }}</li>
<li>消息标题:{{ title }}</li>
</ul>
</template>
<script>
export default {
name:'Detail',
props:['id','title']
}
</script>