路由的query传参

3d6de6120992b92dba311b71a7ef5cc.png

使用

跳转路由并携带query参数，to的字符串写法：

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

跳转路由并携带query参数，to的对象写法：

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

接收

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

除了以下文件，其他都和多级路由一样

index.js

// 该文件专门用于创建整个项目的路由器
import VueRouter from 'vue-router'
// 引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Messages from '../pages/Messages'
import Detail from '../pages/Detail'

//创建并暴露一个路由器
export default new VueRouter({
  routes: [
    {
      path: '/about',
      component: About
    },
    {
      path: '/home',
      component: Home,
      children: [
        {
          path: 'news',
          component: News
        },
        {
          path: 'message',
          component: Messages,
          children: [
            {
              path: 'detail',
              component: Detail
            }
          ]
        },
      ]
    }
  ]
})

Message.vue

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

        <!-- 跳转路由并携带query参数，to的对象写法 -->
        <router-link
          :to="{
            path: '/home/message/detail',
            query: {
              id: msg.id,
              title: msg.title,
            },
          }"
          >{{ msg.title }}</router-link
        >&nbsp;&nbsp;
      </li>
      <hr />
      <router-view></router-view>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'About',
  data() {
    return {
      messageList: [
        { id: '001', title: '消息001' },
        { id: '002', title: '消息002' },
        { id: '003', title: '消息003' },
      ],
    }
  },
}
</script>

Detail.vue

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

<script>
export default {
  name: 'Detail',
  mounted() {},
}
</script>