vuejs中路由的传参以及路由props配置-六虎

前言

在Vue项目里,去完成左边菜单边栏多级内容的展示,导航的切换,以及内容链接的跳转等,用的都是前端路由vue-router,它的重要性,不可言喻

下面介绍一下Vue中的路由传参以及路由的prps装备

方法1-运用queHTTPry方法

这儿循环遍字符间距怎么加宽历一个列表为例,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的方法进行接纳字符间距加宽2磅

 <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参http 302数,简略一点来说便是途径的的参数,并不是像quer科技霸主从带娃开始y一陈思思样那么直观,而是如下所示,途径最终边的/1/IT资源网是params参数,它是动态的

http://localhost:8080/#/new/detail/1/IT资源网

在官方文档里HTTPS,这种被北城动态路由的匹配,便是把某种方法匹配到的所有路由,全都映射到同长沙师范学院一个组件上,比如这个detail组http://www.baidu.com件

关于所有id各不同的详情页,都要运用这个组件来烘托,那么科技创业在界http协议说路由规矩,装备时,就能够运用动态途径参数；来完成,如下所示

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传参,不会显现在地止栏上,会保存在内存中,刷新会丢掉，能够合作本地存储localStohttps安全问题rage进行运用
query的参数会显现在地止栏上科技之锤,不会丢掉

路由的props装备

让路由组件更便利的收到参数

咱们知道在Vue中子组件接纳父组件传递过来的数据,是用props进行接纳,那么同样路由组件也是能够这么操作的

在字符常量接纳传递过来长生十万年的参数的组件,运用字符串是什么意思$route会与路由紧密耦合,但是不是很灵敏,会写一堆的this.$route.params科技创业或this.$route.query这样的代码去读取传递过来的参数

路由装备的布尔方法

当 props 设置为 true 时，route.params 将被设置为组件的 props 它是在对应的路http://192.168.1.1登录由组件装备,设置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传给路由组件

这种方法很好的处理了路由组件传参中目标方HTTP法的坏处,科技图书馆能够兼顾静态参数与动态参数

如下所示

// 创立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.$rohttpwatchute.query或this.$route.params这样的代码,这样的写法是最强壮的

总结

关于Vue中的路由传参以及props的装备就介绍到这儿,科技最狂潮其间传参有两种方法,一种是query,另一种便是phttp 404arams,前者经过url后边跟着参数

,而经过this.$route科技之全球垄断.query进https和http的区别行接纳参数,后者,是在路由规矩装备中的path途径中,以冒号:方法动态路由参数的装备,经过th科技图书馆i科技创业s.$route.params方法进行接纳参数

两种方法各有特点

光看官方文档是理解不了的,这个有必要得自己动手写代码测验,才能知道这两种方法的区别,路由的传参是一个非常重要的知识点

vuejs中路由的传参以及路由props配置

前言

方法1-运用queHTTPry方法

命名路由

方法2-路由的params参数

query与params的区别

路由的props装备

路由装备的布尔方法

路由装备的目标方法

路由装备函数方法

总结

作者信息

推广

vuejs中路由的传参以及路由props配置

前言

方法1-运用queHTTPry方法

命名路由

方法2-路由的params参数

query与params的区别

路由的props装备

路由装备的布尔方法

路由装备的目标方法

路由装备函数方法

总结

相关文章

IntersectionObserver实现图片懒加载

15 个 Vue3 全家桶开发的避坑经验

Android 十六进制状态管理实战

学习 ES6 生成器 ( Generator ) ：掌握优雅的异步编程利器

作者信息

推广