路由params参数和路由命名

1. 路由命名

所谓路由命名就是给路由配置name属性，它可以简化路由跳转

1.1 使用

1.1.1 给路由命名

{
    path:'/demo',
    component:Demo,
    children:[
        {
            path:'test',
            component:Test,
            children:[
                {
                    name:'hello', //给路由命名
                    path:'welcome',
                    component:Hello
                }
            ]
        }
    ]
}

1.1.2 简化跳转

<!--简化前, 需要写完整的路径-->
<router-link to="/demo/test/welcome">跳转</router-link>
<!--简化后, 直接通过名字跳转-->
<router-link :to="{name:'hello'}">跳转</router-link>
<!--简化写法配合传递参数-->
<router-link 
    :to="{
        name:'hello',
        query: {
            id: 666,
            title:'你好'
        }
    }"
>跳转</router-link>

2. 路由params参数

params参数类似SpringMVC中的@requestmapping中的params参数，里面配置占位符接收参数

2.1 配置路由，申明接收params参数

{
    path: '/home',
    component: Home,
    children: [
        {
            path: 'news',
            component: News
        },
        {
            path: 'message',
            component: Message,
            children:[
                {
                    path: 'detail/:id/:content', // 使用占位符接收params参数
                    component: Detail,
                    name: 'mingxi'
                },
            ]
        }
    ]
}

特别注意

路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

2.2 传递参数

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

2.3 接收参数

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