重庆做网站letide,WordPress批量用户,建立修仙大学,手机网站怎么搭建文章目录 命名路由组件传参query参数方式参数传递参数接收 params参数方式参数传递参数接收 props配置方式布尔值形式对象模式函数模式 上一篇#xff1a;#xff08;四十三#xff09;Vue Router之嵌套路由
命名路由
命名路由是为路由配置项提供一个名称#xff0c;以便… 文章目录 命名路由组件传参query参数方式参数传递参数接收 params参数方式参数传递参数接收 props配置方式布尔值形式对象模式函数模式 上一篇四十三Vue Router之嵌套路由
命名路由
命名路由是为路由配置项提供一个名称以便在代码中引用该路由。通过为路由配置项添加name属性可以为路由指定一个唯一的名称。
配置
const router new VueRouter({routes: [{path: /path1,name: name2, // 命名路由为 name1component: Component1,},{path: /path2,name: name2, // 命名路由为 name2component: Component2,},],
});使用
router-link :to{name:name1}/router-link
router-link :to{name:name2}/router-link组件传参
query参数方式
参数传递
字符串写法
router-link :to/xxx?param1${param1}param2${param2}query跳转携带参数
/router-link对象写法
router-link :to{path:/xxx,query:{param1:param1,param2:param2}}query跳转携带参数
/router-link参数接收 $route.query.id$route.query.titleparams参数方式
参数传递
占位符形式
const router new VueRouter({routes: [{path: /xxx/:param1/:param2,component: Component,},],
});router-link :to/xxx/${param1}/${param2}params跳转携带参数
/router-link对象写法
router-link :to{name:detail,params:{param1:param1,param2:param2}}params跳转携带参数
/router-link特别注意路由携带params参数时若使用to的对象写法则不能使用path配置项必须使用name配置
参数接收 $route.params.id$route.params.titleprops配置方式
在组件中使用 $route 会使之与其对应路由形成高度耦合从而使组件只能在某些特定的 URL 上使用限制了其灵活性。
使用 props 将组件和路由解耦props配置将会把参数以props的方式传递到目标组件该配置属性可以是布尔值、对象或函数
布尔值形式
如果 props 被设置为 true把路由组件收到的所有params参数以props传递过来。
const router new VueRouter({routes: [{path: /path1,props: true, // 把路由组件收到的所有params参数以props传给Component组件。component: Component,},],
});对象模式
props对象写法对象中所有的数据都以props传递过来。
const router new VueRouter({routes: [{path: /path1,props: {param1:param1,param2:param2},component: Component,},],
});函数模式
props函数写法该函数返回的对象中每一组数据都会通过props传递过来可以配合query和params使用
const router new VueRouter({routes: [{path: /path1,props($route){return {param1:$route.query.param1,param2:$route.params.param2}}component: Component,},],
});
