查询路由

@Query

在 URL 后面使用 ? 连接 name - value 值对形式的查询字符串来传递参数；多个参数使用 & 拼接

查询路由参数由路由的 query 接收

多用于分享、查看详情等场合

http://127.0.0.1:5500/vue/router.html?name=gl&age=18

配置路由参数

不需要特别配置

查询路由可以使用或不使用，对路由配置没有影响；而动态路由一旦配置，必须按照要求使用

传递路由参数

可以静态使用；也可以动态绑定

可以使用普通路由 path 和命名路由 name 传递路由参数

同样可以使用模板字符串拼接 - 建议

//使用1：静态使用
<router-link to="/team?id=100">team</router-link>

//使用2：动态绑定；path
<router-link :to="{ path: '/team', query: { id: 100 } }">team</router-link>

//使用3：动态绑定；name
<router-link :to="{ name: 'team', query: { id: 100 } }">team</router-link>

//使用4：动态绑定；模板字符串；id是定义的数据变量
<router-link :to="`/about?id=${id}`">team</router-link>

接收路由参数

在路由目标组件 - 使用 useRoute 实例，接收路由参数，可以在逻辑和结构中使用

useRoute() 是一个全局注入的函数，用于在组件中获取当前激活的路由信息。它返回一个 RouteLocationNormalized 对象，包含了当前路由的所有属性，如 path、params、query 等

import { useRoute } from 'vue-router'
let route = useRoute()
console.log(route.query.id);

<div>{{ route.query.id }}</div>

如果仅仅在结构中使用，可以使用默认的全局变量 $route 解析并使用；不建议

<div>{{ $route.query.id }}</div>

注意事项

异常处理

在可能使用查询路由参数的组件中，做兼容性处理；如：如果有查询参数，则显示当前商品；如果没有，则显示所有商品或指定推荐

默认情况下，如果路由参数没有传递，则默认为空对象或空字符串

解构参数

多个路由参数可以使用解构路由以简化语法，会丢失数据的响应式；不建议

为避免失去响应式，应该使用 toRefs

import {toRefs} from 'vue'
import {useRoute} from 'vue-router'
let route = useRoute()
let {query} = toRefs(route)

<template> 渲染路由参数 - 解构路由

<ul>
    <li>{{query.id}}</li>
    <li>{{query.title}}</li>
    <li>{{query.cont}}</li>
</ul>

<template> 渲染路由参数 - 不解构路由

<ul>
    <li>{{route.query.id}}</li>
    <li>{{route.query.title}}</li>
    <li>{{route.query.cont}}</li>
</ul>