VueRouter Query参数

  <div>
    <h1>MessageView</h1>
    <ul>
      <li v-for="message in messages" :key="message.id">
        <router-link :to="`/home/message/detail?id=${message.id}&content=${message.content}`">
          {{ message.content }}
        </router-link>
      </li>
    </ul>
    <hr />
    <router-view></router-view>
  </div>

在页面上通过下列方式获取到参数

  <ul class="">
    <li>
      编号：{{ $route.query.id }}
    </li>
    <li>
      内容：{{ $route.query.content }}
    </li>
  </ul>

这里在传递参数的时候，将参数拼接在了url上，一旦参数多了就不方便了，所以我们也可以换一种写法

        <router-link :to="{
            path: '/home/message/detail',
            query: {
              id: message.id,
              content: message.content
            }
          }
          ">
          {{ message.content }}
        </router-link>