Vue 路由query参数（Day50）

路由传参（query）

1. 新建Detail组件用于展示内容

   <script>
   import {defineComponent} from 'vue'
   export default defineComponent({
       name: "Detail",
   })
   </script>
   
   <template>
       <ul>
           <li>消息编号：</li>
           <li>消息标题：</li>
       </ul>
   </template>
   

2. 配置三级路由

   //该文件用于创建整个应用的路由器
   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: [
                           {
                               path: 'detail',
                               component: Detail
                           }
                       ]
                   },
               ]
           },
       ]
   })
   
   

3. 传递query参数

   1. 使用to的字符串方法实现跳转

      Message组件

      <script>
      import {defineComponent} from 'vue'
      
      export default defineComponent({
          name: "Message",
          data() {
              return {
                  messageList: [
                      {id: '001', title: '消息001'},
                      {id: '002', title: '消息002'},
                      {id: '003', title: '消息003'},
                  ]
              }
          }
      })
      </script>
      
      <template>
          <div>
              <ul>
                  <li v-for="item in messageList" :key="item.id">
                      <router-link :to="`/home/message/detail?id=${item.id}&title=${item.title}`">{{ item.title }}</router-link>
                  </li>
              </ul>
              <hr>
              <router-view/>
          </div>
      </template>
      

   2. 使用to的对象方法实现跳转

      Message组件

      <script>
      import {defineComponent} from 'vue'
      
      export default defineComponent({
          name: "Message",
          data() {
              return {
                  messageList: [
                      {id: '001', title: '消息001'},
                      {id: '002', title: '消息002'},
                      {id: '003', title: '消息003'},
                  ]
              }
          }
      })
      </script>
      
      <template>
          <div>
              <ul>
                  <li v-for="item in messageList" :key="item.id">
                      <router-link :to="{
                          path:'/home/message/detail',
                          query:{
                              id:item.id,
                              title:item.title
                          }
                      }">{{ item.title }}
                      </router-link>
                  </li>
              </ul>
              <hr>
              <router-view/>
          </div>
      </template>
      

4. 接收参数并展示

   Detal组件

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

命名路由

1. 作用：简化路由跳转

2. 使用

   1. 给路由命名

      //该文件用于创建整个应用的路由器
      import VueRouter from "vue-router";
      import About from '@/pages/About.vue'
      import Home from "@/pages/Home.vue";
      import Message from "@/pages/Message.vue";
      import News from "@/pages/News.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',
                                  component: Detail
                              }
                          ]
                      },
                  ]
              },
          ]
      })
      

   2. 简化跳转

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