Vue笔记路由的query参数、命名路由、路由的params参数、路由的props配置

最新推荐文章于 2025-10-13 14:38:04 发布

原创最新推荐文章于 2025-10-13 14:38:04 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

Vue 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了Vue.js中路由的query参数、命名路由、params参数和props配置的使用方法。包括如何传递和接收query参数，命名路由的简化跳转方式，params参数的配置与接收，以及props配置如何使组件便捷获取参数。

一、路由的query参数

1、传递参数

<!-- 跳转路由并携带query参数，to的字符串写法 -->
<router-link :to="`/home/messages/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp; 

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

2、接收参数

$route.query.id

$route.query.title

二、命名路由

1、作用：可以简化路由的跳转

2、如何使用：

（1）给路由命名：

{
        path:'/home',
        component:MyHome,
           children:[  
               {
                   path:'news',  
                   component:MyNews
               },
               {   
                   name:'hello'  //给路由命名
                   path:'messages',
                   component:MyMessages
               }
           ]
    }

（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>

三、路由的params参数

1、配置路由，声明接收params参数

{
        path:'/home',
        component:MyHome,
           children:[  
               {
                   path:'news',  
                   component:MyNews
               },
               { 
                    component:MyMessages,
                    children:[
                         name:'hello',
                         path:'detail/:id/:title',  //使用占位符声明接收params参数
                         component:MyDetail
                  ]  
               }
           ]
    }

2、传递参数

<!-- 跳转路由并携带params参数，to的字符串写法 -->
<router-link :to="`/home/messages/detail/${m.id}&/${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp; 

<!-- 跳转路由并携带params参数，to的对象写法 -->
<router-link :to="{
    name:'hello',
    params:{
      id:m.id,
      title:m.title
     }
   }">
{{m.title}}
</router-link>&nbsp;&nbsp;

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

3、接收参数

$route.params.id

$route.params.title

四、路由的props配置

作用：让路由组件更方便的收到参数

{
  name:'xiangqiang',
  path:'detail/:id',
  component:MyDetail,
  
//第一种写法：props值为对象，该对象中所有的key-value的组合最终会通过props传给MyDetail组件
//props:{a:900}

//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给MyDetail组件
//props:true

//第三种写法：props值为函数，该函数返回的对象中每一组key—value都会通过props传给MyDetail
props(route){
   return{
     id:route.query.id,
     title:route.query.title
  }
 }
}