例子

本篇基于路由的query参数中的完整实例。params参数从路由组件Message.vue传递给路由组件Detail.vue。

• 修改了router/index.js。

import VueRouter from "vue-router";
import Home from "../pages/Home";
import About from "../pages/About";
import News from "../pages/News";
import Message from "../pages/Message";
import Detail from "../pages/Detail";

export default new VueRouter({
    routes:[
        {
            path:"/about",
            component:About
        },
        {
            path:"/home",
            component:Home,
            children:[
                {
                    path:"message",
                    component:Message,
                    children:[
                        {
                            name:"xiangqing",
                            path:"detail/:id/:title",
                            component:Detail
                        }
                    ]
                },
                {
                    path:"news",
                    component:News
                }
            ]
        }
    ]
})

• 修改了路由组件Message.vue

<template>
   <div>
       <ul>
           <li v-for="message in messageList" :key="message.id">
               <router-link :to="{
                   path:'xiangqing',
                   params:{
                       id:message.id,
                       title:message.title
                   }
               }"
               >
                {{message.title}}
               </router-link>
           </li>
       </ul>
       <hr>
       <router-view></router-view>
   </div>
</template>

<script>
export default {
    name:"Message",
    data(){
        return {
            messageList:[
                {id:"001",title:"消息01"},
                {id:"002",title:"消息02"},
                {id:"003",title:"消息03"},
            ]
        }
    }
}
</script>

<style>

</style>

• 修改了路由组件Detail.vue。

<template>
    <ul>
        <li>消息编号：{{$route.params.id}}</li>
        <li>消息标题：{{$route.params.title}}</li>
    </ul>
</template>

<script>
export default {
    name:"Detail",
}
</script>

<style>

</style>

小结

使用params参数在路由组件间传递数据有如下3步：

1. 路由规则中的path字段中，使用占位符声明接收params参数。

export default new VueRouter({
    routes:[
        {
            path:"/about",
            component:About
        },
        {
            path:"/home",
            component:Home,
            children:[
                {
                    path:"message",
                    component:Message,
                    children:[
                        {
                            name:"xiangqing",
                            path:"detail/:id/:title",
                            component:Detail
                        }
                    ]
                },
                {
                    path:"news",
                    component:News
                }
            ]
        }
    ]
})

2. 路由组件传送params参数。

第一种传递方式：to的字符串写法如下。

<template>
   <div>
       <ul>
           <li v-for="message in messageList" :key="message.id">
               <router-link :to="`/home/message/detail/${message.id}/${message.title}`">{{message.title}}</router-link>
           </li>
       </ul>
       <hr>
       <router-view></router-view>
   </div>
</template>

第二种传递方式：to的对象写法，如下。

<template>
    <div>
        <ul>
            <li v-for="message in messageList" :key="message.id">
                <router-link :to="{
                    name:'xiangqing',
                    params:{
                        id:message.id,
                        title:message.title
                    }
                }">
                    {{message.title}}
                </router-link>
            </li>
        </ul>
        <hr>
        <router-view></router-view>
    </div>
</template>

注意哈：传递params参数时，如果使用to的对象写法，不能和path搭配使用，必须和name搭配使用。

3. 另一个路由组件接收params参数。

<template>
    <ul>
        <li>消息编号：{{$route.params.id}}</li>
        <li>消息标题：{{$route.params.title}}</li>
    </ul>
</template>