前言
在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配置内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！