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

在Vue项目里,实现左侧菜单边栏多级内容的展示,导航的切换,以及内容链接的跳转等等,用的都是前端路由vue-router,它的重要性,不可言喻
下面介绍一下Vue中的路由传参以及路由的props配置

使用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>

推荐使用命名路由,在调试和寻找组件的时候,可以根据路由的名字,排查问题

路由的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的区别

1. params传参,必须使用命名路由方式传参

<router-link :to="
{
    path: '/new/detail', // 如果是params,动态路由方式,这种方式是不生效的
    params: {
    id: item.id,
    name: item.name
    }
}
">{{item.name}}</router-link>

2. params传参,不会显示在地止栏上,会保存在内存中,刷新会丢失，可以配合本地存储localStorage进行使用

3. query的参数会显示在地止栏上,不会丢失