Vue嵌套路由和query参数

1. 多级(嵌套)路由

1.1 配置路由规则,使用children配置项

routes:[
  {
    path: '/about'
    component: About
  },
  {
    path: '/home',
    component: Home,
    children:[ //通过children设置子级路由
      {
        path: 'news'  // 此处一定不要写：/news
        component: News
      },
      {
        path: 'message' // 此处一定不要写：/message
        component: Message
      }
    ]
  }
]

1.2 跳转(要写完整路径)

<router-link to="/home/news">News</router-link>

2. query参数

路由可以携带参数

• 第一种方式，在url上面拼接
• 第二种方式：<router-link>中的to属性传入对象

<template>
  <div>
    <ul>
      <li v-for="message in messageList" :key="message.id">
<!-- 跳转路由携带query参数，to的字符串写法       -->
        <router-link :to="`/home/message/detail?id=${message.id}&content=${message.content}`">{{message.content}}</router-link> | 
<!-- 跳转路由携带query参数，to的对象写法       -->
        <router-link :to="{
          path:'/home/message/detail',
          query: {id: message.id, content: message.content}
        }">{{message.content}}</router-link>
      </li>
    </ul>
    <hr/>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Message",
  data(){
    return {
      messageList:[
        {id:"001", content: "消息1"},
        {id:"002", content: "消息2"},
        {id:"003", content: "消息3"},
      ]
    }
  }
}
</script>

接收参数：

<template>
  <div>
    消息id:{{$route.query.id}}, 消息内容： {{$route.query.content}}
  </div>
</template>

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