vuejs路由的传参及路由props配置详解
前言
在Vue项目里,去实现左侧菜单边栏多级内容的展示,导航的切换,以及内容链接的跳转等,用的都是前端路由vue-router,它的重要性,不可言喻
下面介绍一下Vue中的路由传参以及路由的prps配置
方式1-使用query方式
这里循环遍历一个列表为例,query的方式,跳转的url后面携带的一些具体的参数,比如下面的携带id,和name
to字符串的写法
<router-link :to="`/new/detail?id=${item.id}&name=${item.name}`">{{item.name}}</router-link>to对象的写法
<router-link :to="
{
path: '/new/detail',
query:{
id: item.id,
name: item.name
}
}">{{item.name}}
</router-link>以上对象的写法,相比于字符串的写法,虽然麻烦了一点,但是比较清晰,当传入的参数比较多时,比较适合,而且也易维护
如下是完整的组件代码,定义了一个NewCom.vue的组件
<template>
<div>
<ul>
<li v-for="item in lists" :key="item.id">
<router-link :to="`/new/detail/?id=${item.id}&name=${item.name}`">{{item.name}}</router-link>
</li>
<router-view></router-view>
</ul>
</div>
</template>
<script>
export default {
name: 'NewCom',
data() {
return {
lists: [
{
id: "1",
name: 'IT资源网',
url: 'https://itclan.cn'
},
{
id: '2',
name: 'itclanCoder',
url: 'https://coder.itclan.cn'
},
{
id: '3',
name: '客来影视TV',
url: 'https://video.itclan.cn'
},
{
id: '4',
name: '发卡商城',
url: 'https://faka.itclan.cn'
},
{
id: '5',
name: '爱客来科技',
url: 'https://aikelaidev.cn'
}
]
}
}
}
</script>
<style lang="scss" scoped>
ul,li {
list-style: none;
}
</style>那组件的另一边如何去接收传递过去的参数呢,通过this.$route.query的方式进行接收
<p>{{this.$route.query.id}} {{this.$route.query.name}}</p>命名路由
在路由跳转时,to后面跟着路径这种写法是没什么问题的,但会发现,也很麻烦,有时,通过一个名称来标识一个路由,就会显得更方便一些的,特别是在链接一个路由,或是执行一些跳转的时候,你可以在创建Router实例的时候
在routes配置中某个路由设置名称,如下代码所示
import VueRouter from "vue-router"
import New from "../components/NewCom.vue";
import About from "../components/AboutCom.vue";
import Detail from "../components/DetaiCom.vue";
// 创建router示例对象
const router = new VueRouter({
routes: [
{
name: 'new',
path: '/new',
component: New,
children: [
{
name: "detailPage", // 用name命名路由的名称
path: 'detail',
component: Detail
}
]
},
{
path: '/about',
component: About
}
]
})
export default router;那么另一边路由跳转时,直接使用name就可以了,不用写具体的路径path了的,如下所示
<router-link :to="
{
name: 'detailPage', // 此处使用name就可以了的,其他的不变
query: {
id: item.id,
name: item.name
}
}">{{item.name}}</router-link>命名路由,其实就是可以简化路由的跳转
<!--简化前,需要填写完整的路径-->
<router-link to="/new/detail"></router-link>
<!-- 简化后,直接通过名字跳转 -->
<router-link :to="{name:'detailPage'}"></router-link>
<!--简化写法配合query传递参数-->
<router-link :to="{
name: 'detailPage',
query: {
id: '111',
name: 'itclan.cn'
}
}">
</router-link>推荐使用命名路由,在调试和寻找组件的时候,可以根据路由的名字,排查问题
方式2-路由的params参数
这个路由的params参数,简单一点来说就是路径的的参数,并不是像query一样那么直观,而是如下所示,路径最后面的/1/IT资源网是params参数,它是动态的
http://localhost:8080/#/new/detail/1/IT资源网
在官方文档里,这种被北城动态路由的匹配,就是把某种模式匹配到的所有路由,全都映射到同一个组件上,比如这个detail组件
对于所有id各不同的详情页,都要使用这个组件来渲染,那么在定义路由规则,配置时,就可以使用动态路径参数；来实现,如下所示
import VueRouter from "vue-router"
import New from "../components/NewCom.vue";
import About from "../components/AboutCom.vue";
import Detail from "../components/DetaiCom.vue";
// 创建router示例对象
const router = new VueRouter({
routes: [
{
name: 'new',
path: '/new',
component: New,
children: [
{
name: "detailPage", // 用name命名路由的名称
// path: 'detail', // 非动态路由设置
// 动态路径参数，以冒号开头:参数名
path: 'detail/:id/:name', // 使用占位符声明接收的params参数
component: Detail
}
]
},
{
path: '/about',
component: About
}
]
})
export default router;那在组件中如何传递参数呢,如下所示
<router-link :to="`/new/detail/${item.id}/${item.name}`">{{item.name}}</router-link>或如下对象的写法
<router-link :to="
{
name: 'detailPage',
params: {
id: item.id,
name: item.name
}
}
">{{item.name}}</router-link>两种写法:归纳一下
<!--跳转并携带params参数,to的字符串写法-->
<router-link :to="/new/detail/1/IT资源网">新闻</router-link>
<router-link :to="{name: 'detailPage',params: {id:1,name:'IT资源网'}}">特别注意: 路由携带params参数时,若使用to的对象写法,则不能使用path配置项,必须使用name配置
另一边组件如何接收的？**通过this.$route.params**可以进行接收
query与params的区别
params传参,必须使用命名路由方式传参
<router-link :to="
{
path: '/new/detail', // 如果是params,动态路由方式,这种方式是不生效的
params: {
id: item.id,
name: item.name
}
}
">{{item.name}}</router-link>params传参,不会显示在地止栏上,会保存在内存中,刷新会丢失，可以配合本地存储localStorage进行使用query的参数会显示在地止栏上,不会丢失
路由的props配置
让路由组件更方便的收到参数
我们知道在Vue中子组件接收父组件传递过来的数据,是用props进行接收,那么同样路由组件也是可以这么操作的
在接收传递过来的参数的组件,使用$route会与路由紧密耦合,但是不是很灵活,会写一堆的this.$route.params或this.$route.query这样的代码去读取传递过来的参数
路由配置的布尔模式
当 props 设置为 true 时，route.params 将被设置为组件的 props 它是在对应的路由组件配置,设置props:true,如下所示
// 省略
// 创建router示例对象
const router = new VueRouter({
routes: [
{
name: 'new',
path: '/new',
component: New,
children: [
{
name: "detailPage", // 用name命名路由的名称
// path: 'detail', // 非动态路由设置
path: 'detail/:id/:name', // 使用占位符声明接收的params参数
component: Detail,
props: true // 此处设置props: true
}
]
},
{
path: '/about',
component: About
}
]
})
export default router;那么在接收使用参数的组件,通过props: ['参数1','参数2']
<template>
<div>
<!-- 直接在模板中可以使用 -->
<p>{{id}} {{name}}</p>
</div>
</template>
<script>
export default {
name: 'DetailCom',
props: ['id','name'], // 通过props进行接收
mounted() {
console.log(this.$route);
}
}
</script>路由配置的对象模式
我们有时候,不仅仅是需要传入动态的参数,也需要传入静态的参数(写死的参数)传给路由组件,那么这个时候,props对象模式就会很有用,如下所示
const router = new VueRouter({
routes: [
{
name: 'new',
path: '/new',
component: New,
children: [
{
name: "detailPage", // 用name命名路由的名称
path: 'detail/:id/:name', // 使用占位符声明接收的params参数
component: Detail,
props: { // 对象形式,静态参数
url: 'https://itclan.cn'
}
}
]
},
]
})在路由组件接收使用参数,依旧使用props:['url']进行接收
注意的是:当props为对象时,那么动态的参数,就失效了,只有静态参数才有用
所以接下来介绍的路由函数模式,就可以兼顾动态的路由参数与静态参数的结合
路由配置函数模式
props值为函数,该函数返回的对象中每一组key-vaue都会通过props传给路由组件
这种方式很好的解决了路由组件传参中对象模式的弊端,可以兼顾静态参数与动态参数
如下所示
// 创建router示例对象
const router = new VueRouter({
routes: [
{
name: 'new',
path: '/new',
component: New,
children: [
{
name: "detailPage", // 用name命名路由的名称
path: 'detail/:id/:name', // 使用占位符声明接收的params参数
component: Detail,
props(route) { // props值为函数形式,接收一个参数route,并且返回一个对象
return {
id: route.params.id,
name: route.params.name,
url: 'https://itclan.cn'
}
}
// 等价如下两种写法
// 可以对参数进行解构
/*
props({params}) {
return {
id: params.id,
name: params.name,
url: 'https://itclan.cn'
}
}*/
// 对象的解构以及连续赋值,语义化不明确,不推荐
props({params: {id,name}}) {
return {
id,
name,
url: 'https://itclan.cn'
}
}
}
]
},
]
})
export default router;让路由组件接收参数时,能够更加的灵活,不需要写很多重复this.$route.query或this.$route.params这样的代码,这样的写法是最强大的
总结
关于Vue中的路由传参以及props的配置就介绍到这里,其中传参有两种方式,一种是query,另一种就是params,前者通过url后面跟着参数
,而通过this.$route.query进行接收参数,后者,是在路由规则配置中的path路径中,以冒号:形式动态路由参数的配置,通过this.$route.params方式进行接收参数
两种方式各有特点
光看官方文档是理解不了的,这个必须得自己动手写代码测试,才能知道这两种方式的区别,路由的传参是一个非常重要的知识点
而路由组件的props配置则是更好的接收参数,让接收参数更加的灵活
到此这篇关于vuejs路由的传参及路由props配置的文章就介绍到这了,更多相关vuejs路由传参及props配置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue3 + async-validator实现表单验证的示例代码
表单验证可以有效的过滤不合格的数据，减少服务器的开销，并提升用户的使用体验，今天我们使用 vue3 来做一个表单验证的例子，需要的朋友跟随小编一起学习下吧2022-06-06
在Vue中,父组件可以通过`ref`引用子组件,并通过`$refs`属性来访问子组件的数据,下面分步骤给大家介绍vue 父组件获取子组件里面的data数据,感兴趣的朋友一起看看吧2024-06-06
这篇文章主要介绍了vue.set() (this.$set)的用法及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
在Vue.js项目中,构建后的资源文件（如CSS、JavaScript文件、图片等）通常会被放置在指定的目录下,为了确保这些文件能够被正确加载,Vue CLI 提供了配置选项来指定这些文件的路径,本文给大家介绍了Vue打包为相对路径的具体实现方法,需要的朋友可以参考下2024-09-09
这篇文章主要为大家详细介绍了基于vue实现多引擎搜索及关键字提示的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要介绍了vue项目中form data形式传参方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
下面小编就为大家分享一篇浅谈vue引入css,less遇到的坑和解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了Vue3 封装扩展并简化Vuex在组件中的调用,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-01-01
这篇文章主要介绍了vue3中使用v-model实现父子组件数据同步的三种方案,如果只有一个匿名v-model的传递的话,可以使用vue3.3新添加的编译宏,defineModel来使用,每种方案结合示例代码给大家介绍的非常详细,需要的朋友可以参考下2023-10-10
这篇文章主要为大家详细介绍了vue+elementUI配置表格的列显示与隐藏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
最新评论