脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vuejs路由传参及props配置

vuejs路由的传参及路由props配置详解

 更新时间：2022年07月21日 09:01:02   作者：itclanCoder  
最近在学习vue router的传参,所以下面这篇文章主要给大家介绍了关于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配置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Vue基于NUXT的SSR详解

    Vue基于NUXT的SSR详解

    这篇文章主要介绍了Vue基于NUXT的SSR详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • vue百度地图修改折线颜色,添加icon和文字标注方式

    vue百度地图修改折线颜色,添加icon和文字标注方式

    这篇文章主要介绍了vue百度地图修改折线颜色,添加icon和文字标注方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法

    关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法

    这篇文章主要介绍了关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法，实现方法有两种，本文通过实例代码对每种方法介绍的很详细，需要的朋友参考下
    2018-12-12
  • Vue中iframe 结合 window.postMessage 实现跨域通信

    Vue中iframe 结合 window.postMessage 实现跨域通信

    window.postMessage() 方法可以安全地实现跨源通信，在一个项目的页面中嵌入另一个项目的页面，需要实现父子，子父页面的通信，对Vue中iframe 结合 window.postMessage 实现跨域通信相关知识感兴趣的朋友跟随小编一起看看吧
    2022-12-12
  • vue3项目中引入ts的详细图文教程

    vue3项目中引入ts的详细图文教程

    最近项目需要将原vue项目结合ts的使用进行改造,这个后面应该是中大型项目的发展趋势,下面这篇文章主要给大家介绍了关于vue3项目中引入ts的相关资料,需要的朋友可以参考下
    2022-09-09
  • vue响应式更新机制及不使用框架实现简单的数据双向绑定问题

    vue响应式更新机制及不使用框架实现简单的数据双向绑定问题

    vue是一款具有响应式更新机制的框架，既可以实现单向数据流也可以实现数据的双向绑定。这篇文章主要介绍了vue响应式更新机制及不使用框架实现简单的数据双向绑定问题,需要的朋友可以参考下
    2019-06-06
  • element中drawer模板的实现

    element中drawer模板的实现

    本文主要介绍了element中drawer模板的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • vue实现点击按钮“查看详情”弹窗展示详情列表操作

    vue实现点击按钮“查看详情”弹窗展示详情列表操作

    这篇文章主要介绍了vue实现点击按钮“查看详情”弹窗展示详情列表操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • Spring Boot/VUE中路由传递参数的实现代码

    Spring Boot/VUE中路由传递参数的实现代码

    在路由时传递参数，一般有两种形式，一种是拼接在url地址中，另一种是查询参数。这篇文章主要介绍了Spring Boot/VUE中路由传递参数,需要的朋友可以参考下
    2018-03-03
  • Vue3 Radio单选切换展示不同内容实现代码

    Vue3 Radio单选切换展示不同内容实现代码

    这篇文章主要介绍了Vue3 Radio单选切换展示不同内容,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-07-07

最新评论