动态路由

@Params

配置路由参数

使用通配符 : - wild card 定义对应当前路由的动态路由

可以定义一个或多个

? 表示该参数可选

根据 id 展示对应的内容

{
    path: '/goods/:id',
    name: 'goods',
    component: () => import('../components/Goods.vue'),
}

传递路由参数

在 URL 后面采用路径的方式传递参数，将给定匹配模式的路由映射到同一个组件，如 /goods/1 和 /goods/2 这样的 URL 都会映射到同一个路由 /goods: 在同一个页面根据 id 显示不同的商品

动态属性绑定 to 时，只能使用命名路由 name，不可以使用普通路由 path - 因为匹配不到

Path "/xxx" was passed with params but they will be ignored. Use a named route alongside params instead.

推荐使用模板字符串

方便起见，请直接在浏览器的地址栏输入不同的 id，调试动态路由的使用情况

//使用1：静态路由 - 传递的id为100
<router-link to="/html/100">html - 100</router-link>

//使用2：动态路由 - 普通拼接，变量id的值为200
<router-link :to="'/html/' + id">html - id/200</router-link>

//使用3：动态路由 - 模板字符串，变量id的值为300
<router-link :to="`/html/${id}`">html - id/300</router-link>

//使用4：动态路由 - 对象；使用name，不能使用path
<router-link :to="{ name: 'html', params: { id: 400 } }">html - id</router-link>

接收路由参数

动态路由参数由路由的 params 接收

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

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

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

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

使用可选链操作符 ?. 可以有效避免没有指定/传递路由参数引起的报警；如果 route.params 为 null 或 undefined，则不会报错，而是返回 undefined - 最佳体验

<div>{{ route.params?.id }}</div>

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

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

注意事项

异常处理

不确定的用户行为有可能导致路由参数为空或缺失，导致渲染失败

解决方案1：使用条件渲染判断路由参数是否存在

解决方案2：配置 404 路由

多个路由参数

尽量精准设计路由，避免使用

必要时，使用命名路由，简化路由操作

{
    path: '/home/:id/:title/:cont/:other?',
    name: "home",
    component: Home
}

不直观；可读性不好

<router-link to = "/home/10/leading/conteng">home</router-link>

使用命名路由

<router-link :to = "{
    name: 'home',
    params: {
        id: 10,
        title: 'leading',
        cont: 'content'
    }
}">home</router-link>

summary & homework

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

动态路由 - 使用 : 定义；数据绑定时，只能使用命名路由

[] DetailView

在产品列表的基础上，使用商品 id 增加动态路由，以便显示不同的商品

创建详情页组件 DetailView.vue

引入路由并展示路由对应的商品 id 和其它信息

增加商品详情页路由，使用 id 指定为动态路由

修改商品列表组件 Goods.vue，绑定商品 id，增加导航功能到对应的详情页