Vue 路由params参数（Day51）

路由的params参数

使用to的字符串写法实现

1. 配置路由信息，写好占位符声明params参数

   index.js文件

   //该文件用于创建整个应用的路由器
   import VueRouter from "vue-router";
   import Home from "@/pages/Home.vue";
   import Message from "@/pages/Message.vue";
   import Detail from "@/pages/Detail.vue";
   // 创建并暴露一个路由器
   export default new VueRouter({
       routes: [
           {
               path: '/home',
               component: Home,
               children: [
                   {
                       path: 'message',
                       component: Message,
                       children: [
                           {
                               name:'DEtail',
                               path: 'detail/:id/:title',
                               component: Detail
                           }
                       ]
                   }
               ]
           },
       ]
   })
   

2. 传递参数

   Message组件

   <router-link :to="`/home/message/detail/${item.id}/${item.title}`">{{ item.title }}</router-link>
   

3. 数据渲染

   Detail组件

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

使用to的对象方法实现

1. 配置路由信息，写好占位符声明、接收params参数（同上）

2. 传递参数

   Message组件

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

3. 数据渲染（同上）

注：使用此方法进行传参时，不可使用path路径进行跳转，只能使用name配置项