Vue (20) — 路由的query参数以及params参数、命名路由、路由的props配置、＜router-link＞的replace属性

目录

一、路由的query参数

1.传递参数

2.接收参数

二、命名路由

  1.作用

  2.如何使用

        1.给路由命名

            2.简化跳转

三、路由的params参数

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

  2.传递参数

  3.接收参数

四、路由的props配置

五、<router-link>的replace属性

  1.作用

  2.浏览器的历史记录有两种写入方式

  3.如何开启replace模式

---

一、路由的query参数

1.传递参数

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

<!-- 跳转路由并携带query参数，to的对象写法 -->
<router-link :to="{
    path:'/home/message/detail',
    query:{
        id:XXX,
        title:'你好'
    }
}">
跳转
</router-link>

2.接收参数

$route.query.id

$route.query.title

二、命名路由

  1.作用

        可以简化路由的跳转。

 

  2.如何使用

        1.给路由命名

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

            2.简化跳转

 <!-- 简化前，需要写完整路径 -->
<r