网站里面的图片做桌面不清晰,安康建设网站,网站基本要素,朵以服饰 网站建设什么是路径参数
在路由配置中#xff0c;可以将【参数】放在【路由路径】中#xff0c;
从而实现#xff0c;同一个 路由#xff0c;同一个组件#xff0c;因路径参数不同#xff0c;可以渲染出不同的内容。特点 #xff1a;
1、当携带不同路径参数的路由相互跳转时可以将【参数】放在【路由路径】中
从而实现同一个 路由同一个组件因路径参数不同可以渲染出不同的内容。特点
1、当携带不同路径参数的路由相互跳转时组件实例可以直接被重复使用无需销毁重建因此效率高
2、但是上述的跳转无法调用组件的声明周期钩子因为组件根本不会重新加载。
3、路径参数可以有多个
4、路径参数可以在组件中通过 useRoute() API 返回的 当前路由对象 获取到。
5、路径参数可以使用正则表达式的方式进行匹配 本文暂不涉及。路径参数 定义的语法格式 【:参数名】
路径参数 使用的语法格式 当前路由对象中的 params 属性 包含了对应的参数。基本使用案例
案例说明
1、定义了一个包含【路径参数】的路由配置
2、定义了一个组件组件中获取到路径参数并打印出来。路由配置文件 // 导入 定义路由的两个方法
import {createRouter,createWebHistory} from vue-router// 引入组件
import componentC from ./componentC.vue;// 声明路由跳转的路径与组件的对应关系
const routsList [// 路由路径中存在存在 路径参数{path:/c/:p1/:p2/:p3,component:componentC},
]// 创建路由的实例对象
const routerConfigObj createRouter({history:createWebHistory(abc), // 带一个参数表示是路由的一个前缀routes:routsList // 指定路由的配置列表
})// 导出路由的对象
export default routerConfigObj; 路由目标组件componentC.vue代码 查看 路径参数 templatediv classdivb这是组件Cbr{{ currentRoute.params }}/div
/templatescript setup langts// 引入路由相关的 APIimport { useRoute} from vue-router;// 声明 当前路由对象const currentRoute useRoute()// 打印一下路由实例对象 和 当前路由对象console.log(C 组件 中 当前路由对象 ,currentRoute)/scriptstyle scoped.divb{width: 200px;height: 200px;background: green;}
/styleApp.vue 代码 : router-view 标签展示路由目标组件 templatediv classbasedivAPP.vue 中的 msg : {{ msg }}br brbrbr!-- router-view 进行目标组件的展示 --router-view/router-view/div/templatescript setup langts// 引入 provide 方法import { ref } from vue// 声明父组件的一个变量const msg ref(这是App根组件的msg变量)/scriptstyle scoped.basediv{width: 600px;height: 400px;border: 1px solid red;}
/style运行效果
