{
path: '/details/:id',
name: 'details',
component: () => import('../components/DetailsView.vue'),
}
//使用1：静态路由 - 传递的 id 为 100
<router-link to="/details/1">details - 1</router-link>
//使用2：动态路由 - 普通拼接，变量 id 为 2
<router-link :to="'/details/' + id">details - id/2</router-link>
//使用3：动态路由 - 模板字符串，变量 id 为 3
<router-link :to="`/details/${id}`">details - id/3</router-link>
//使用4：动态路由 - 使用 name，不能使用 path
<router-link :to="{ name: 'details', params: { id: 4 } }">details - id</router-link>
import { useRoute } from 'vue-router'
let route = useRoute()
console.log(route.params);
<div>{{ route.params.id }}</div>
<div>{{ $route.params.id }}</div>
<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>