vue路由组件传值,vue3 props传值
本文主要介绍了某视频剪辑软件路由组件通过小道具配置传参的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
目录
一、基于参数参数传递1、index.js(路由配置)2、Box_1.vue(父路由组件-发送参数)3、Menu_1.vue(子路由组件-接收参数)二、基于询问和参数参数传递（通用)1、index.js(路由配置)2、Box_1.vue(父路由组件-发送参数)3、Menu_1.vue(子路由组件-接收参数)本文主要介绍了某视频剪辑软件路由组件通过小道具配置传参的实现，分享给大家，具体如下：
一、基于params参数传递
1、index.js（路由配置）
道具：真的
//引入路由
//eslint-disable-next-line no-unused-vars
从“vue路由器"导入某视频剪辑软件路由器
从导入框_1 ./pages/Box_1.vue
从导入框_2 ./pages/Box_2.vue
从导入菜单_1 ./pages/Menu_1.vue
从导入菜单_2 ./pages/Menu_2.vue
//创建一个路由器
导出默认的新VueRouter({
路线：[
{
路径："/Box_1 "，
组件：Box_1，
儿童：[
{
名称：我的菜单,//用名字代替路径
路径：“Menu_1”，
组件：Menu_1，
道具：真的
},
{
路径：“Menu_2”，
组件：菜单_2
},
]
},
{
路径："/Box_2 "，
组件：Box_2，
儿童：[
{
路径：“Menu_1”，
组件：菜单_1
},
{
路径：“Menu_2”，
组件：菜单_2
},
]
},
]
})
2、Box_1.vue（父路由组件 - 发送参数）
模板
div class=m_box
div class=top
！-路由跳转链接-
路由器链接class= box _ 1 active-class= active
:to={
名称："我的菜单",
参数：{
id:id，
名称：姓名
}
}
菜单一
/路由器链接
！-路由跳转链接-
路由器-link class= Box _ 2 to=/Box _ 1/menu _ 2 active-class= active
菜单2
/路由器链接
/div
div class=bottom
！-我是方框一组件！-
路由器视图/路由器视图
/div
/div
/模板
脚本
导出默认值{
名称： Box_1 ，
data(){
返回{
id:“666”，
名称：我是方框一组件传过来的参数
}
}
};
/脚本
3、Menu_1.vue（子路由组件 - 接收参数）
模板
div class=m_box
div class=top
！-路由跳转链接-
路由器链接class= box _ 1 active-class= active
:to={
名称："我的菜单",
参数：{
id:id，
名称：姓名
}
}
菜单一
/路由器链接
！-路由跳转链接-
路由器-link class= Box _ 2 to=/Box _ 1/menu _ 2 active-class= active
菜单2
/路由器链接
/div
div class=bottom
！-我是方框一组件！-
路由器视图/路由器视图
/div
/div
/模板
脚本
导出默认值{
名称： Box_1 ，
data(){
返回{
id:“666”，
名称：我是方框一组件传过来的参数
}
}
};
/脚本
二、基于Query和params参数传递（通用）
1、index.js（路由配置）
(1)查询参数
id:$route.query.id，name:$route.query.name，(2)params参数
id:$route.params.id，name:$route.params.name，
//引入路由
//eslint-disable-next-line no-unused-vars
从“vue路由器"导入某视频剪辑软件路由器
从导入框_1 ./pages/Box_1.vue
从导入框_2 ./pages/Box_2.vue
从导入菜单_1 ./pages/Menu_1.vue
从导入菜单_2 ./pages/Menu_2.vue
//创建一个路由器
导出默认的新VueRouter({
路线：[
{
路径："/Box_1 "，
组件：Box_1，
儿童：[
{
名称：我的菜单,//用名字代替路径
路径：“Menu_1”，
组件：Menu_1，
道具($路线){
返回{
id:$route.params.id，
name:$route.params.name，
}
}
},
{
路径：“Menu_2”，
组件：菜单_2
},
]
},
{
路径："/Box_2 "，
组件：Box_2，
儿童：[
{
路径：“Menu_1”，
组件：菜单_1
},
{
路径：“Menu_2”，
组件：菜单_2
},
]
},
]
})
2、Box_1.vue（父路由组件 - 发送参数）
注意：参数：如果是想询问方式，就改成询问
模板
div class=m_box
div class=top
！-路由跳转链接-
路由器链接class= box _ 1 active-class= active
:to={
名称："我的菜单",
参数：{
id:id，
名称：姓名
}
}
菜单一
/路由器链接
！-路由跳转链接-
路由器-link class= Box _ 2 to=/Box _ 1/menu _ 2 active-class= active
菜单2
/路由器链接
/div
div class=bottom
！-我是方框一组件！-
路由器视图/路由器视图
/div
/div
/模板
脚本
导出默认值{
名称： Box_1 ，
data(){
返回{
id:“666”，
名称：我是方框一组件传过来的参数
}
}
};
/脚本
3、Menu_1.vue（子路由组件 - 接收参数）
模板
div class= m _ box { { id } } .{{name}}/div
/模板
脚本
导出默认值{
名称：菜单_1 ，
道具：[id ， name]，
已安装(){
控制台。log(===========)；
控制台。日志(这个)；
},
};
/脚本
到此这篇关于某视频剪辑软件路由组件通过小道具配置传参的实现的文章就介绍到这了，更多相关某视频剪辑软件道具传参内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。