怎么在vue中使用$router.push实现两组件间值传递
本篇文章给大家分享的是有关怎么在vue中使用 $router.push实现两组件间值传递,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
成都创新互联专注为客户提供全方位的互联网综合服务,包含不限于成都网站建设、做网站、南通网络推广、小程序制作、南通网络营销、南通企业策划、南通品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;成都创新互联为所有大学生创业者提供南通建站搭建服务,24小时服务热线:18980820575,官方网址:www.cdcxhl.com
vue是什么
Vue是一套用于构建用户界面的渐进式JavaScript框架,Vue与其它大型框架的区别是,使用Vue可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。
vue文件部分:
{{ node.label }}
这是封装好的树状列表,使用 scoped slot 会传入两个参数 node 和 data ,分别表示当前节点的 Node 对象和当前节点的数据。当点击button会路由跳转页面显示在
那我们先来看一下ts中edit这个方法是怎么写的。
edit(info: Idata) { this.$router.push({ name: `ListEdit`, query: { label: info.label, scene: info.scene, }, }); },
终于看到主角 $router.push ,它会带两个参数,name表示即将跳转到的路由名字,还有一个参数可以是query,也可以是params,它们的区别简单来说,就相当于 get 和 post ,query == get ,params == post,query 会把携带的参数显示在 url 中。那query中的参数就是所需要携带的参数,那这一步总体来说就意味着跳转到ListEdit这个路由页面,并携带label、scene 这两个参数。
至于其中的 info:Idata 这样的写法是因为ts,ts接口了解一下。
现在编辑按钮这部分内容ok了,它确定了要跳转的地方还有需要携带的参数,那么我们这个ListEdit路由页面就应该做好准备接收人家带来的参数呀。在页面创建期间和路由发生改变期间,都会有一个传值的动作,那就再created钩子函数和监听路由函数中写入代码。
created() { const {label= "", scene= ""} = this.$route.query; this.form = { name: label.toString(), initScene: scene.toString(), }; }, watch: { $route(to, from) { if (to.path === "/list/listEdit") { const {label= "", scene= ""} = to.query; this.form = { name: label.toString(), initScene: scene.toString(), }; } }, },
我感觉这样半截的代码实在难以说明,name、initScene都是前面定义的,还是放出完整代码体验一下吧。
树状列表编辑按钮vue文件部分:
{{ node.label }}
树状列表编辑按钮ts文件部分:
import Vue from "vue"; interface Idata { id: string; label: string; scene: string; children?: Idata[]; } export default Vue.extend({ data() { const data: Idata[] = [{ id: "1", label: "1", scene: "场景1", }, { id: "2", label: "2", scene: "场景2", children: [{ id: "4", label: "2-1", scene: "场景1", }], }, { id: "3", label: "3", scene: "场景2", }]; return { data, dataList: JSON.parse(JSON.stringify(data)), }; }, methods: { edit(info: Idata) { this.$router.push({ name: `VisListEdit`, query: { label: info.label, scene: info.scene, }, }); }, }, });
这里,ts接口定义可以递归实现,children的类型定义还是Idata,就可以直接自我调用。
ListEdit 路由页面vue文件部分:
ListEdit 路由页面ts文件部分:
import Vue from "vue"; interface Iscenes { id: string; name: string; selected: boolean; } export default Vue.extend({ data() { const sceneOption: Iscenes[] = [{ id: "1", name: "场景1", selected: false, },{ id: "2", name: "场景2", selected: false, },{ id: "3", name: "场景3", selected: false, }]; return { form: { name: "", initScene: "", }, sceneOption, }; }, created() { const {label= "", scene= ""} = this.$route.query; this.form = { name: label.toString(), initScene: scene.toString(), }; }, watch: { $route(to, from) { if (to.path === "/list/listEdit") { const {label= "", scene= ""} = to.query; this.form = { name: label.toString(), initScene: scene.toString(), }; } }, }, methods: { submitForm() { console.log("test"); } }, });
最后,再来看一下,路由部分的配置:
import ListDetail from "../views/list-detail/index.vue"; import List from "../views/list/index.vue"; import { MenuConfig } from "./index"; export const listRouter: MenuConfig = { path: "/list", component: List, title: "目录管理", key: "list", name: "list", hasPermission: true, subShow: false, children: [{ path: "listEdit", title: "编辑目录", hasPermission: true, name: "ListEdit", key: "ListEdit", component: ListDetail, }], };
以上就是怎么在vue中使用 $router.push实现两组件间值传递,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。
网页标题:怎么在vue中使用$router.push实现两组件间值传递
链接分享:http://myzitong.com/article/gsdojg.html