Vue中的路由传递参数

目录

1.路由可以接收的两种参数

2.query 参数

        1.query 参数书写形式：

        2.路由中的 query 传参，to 的字符串写法

        3.路由中的 query 传参， to 的对象写法

        4.路由组件接收 query 参数

2.params 参数

        1.params 参数书写方式

        2.路由中的 params 传参，to 的字符串写法

        3.路由中的 params 传参， to 的对象写法

---

1.路由可以接收的两种参数

        1.query 参数

        2.props 参数

2.query 参数

        1.query 参数书写形式：

路径?key1=value1&key2=value2  //多组key value 之间使用 & 连接

        2.路由中的 query 传参，to 的字符串写法

        <li v-for="mi in detailList" :key="mi.id">
            <!-- 跳转路由并携带query参数，to的字符串写法 -->
            <router-link :to="`/home/message/detail?id=${mi.id}&title=${mi.title}`">{{ mi.title}}</router-link>
        </li>

                注意：这里字符串写法需要使用到 模板字符串 去读取变量 

        3.路由中的 query 传参， to 的对象写法

        <li v-for="mi in detailList" :key="mi.id">
           
            <!-- 跳转路由并携带query参数，to的对象写法 -->
            <router-link 
                :to="{
                    path: '/home/message/detail',
                    query: {
                        id: mi.id,
                        title: mi.title
                    }
                }">
                {{ mi.title }}
            </router-link>
        </li>

                注意：对象中写两个配置项，path 表示你想往哪里跳转，值为路径，query 为一个对象，里面写你需要传递的 query 参数

        4.路由组件接收 query 参数

                1.每一个路由组件都会又一个 $route 来存储 当前组件的路由配置信息，打印结果如下：

             2.组件中模板可以通过 $route.query 可以拿到 query 对象，query对象中存储着 query 参数，js 中通过 this.route.query 拿到 query 对象

        代码展示：

    <li>消息编码：{{ $route.query.id }}</li>
    <li>消息标题：{{ $route.query.title }}</li>

2.params 参数

        1.params 参数书写方式

路径/参数一/参数二/......

        2.路由中的 params 传参，to 的字符串写法

    <!-- params 传参 -->
    <router-link :to="`/home/message/detail/${mi.id}/${mi.title}`">{{ mi.title}}</router-link>

        其中路由规则中需要改变当前路由规则中的 path ,更改如下：

{
    path: 'detail/:id/:title',
    component: Detail,
}

        3.路由中的 params 传参， to 的对象写法

注意：当使用 params to对象传参的方式，就不可以写path了，需要将path替换为 name 属性 

<router-link 
    :to="{
    name: 'xiangqing',
    params: {
        id: mi.id,
        title: mi.title
    }
}">
    {{ mi.title}}
</router-link>

            其中路由规则中需要添加一个配置项，name 配置项

{
    name: 'xiangqing'
    path: 'detail/:id/:title',
    component: Detail,
}