路由的总结
创始人
2025-05-30 01:35:31
0


    一、vueRouter的初始化配置
    1、路由的配置重点掌握路由表的开发
    路由表式浏览器访问的url【路径】(!!不是vue文件的路径!!)和页面组件的映射关系
    需要配置两个属性 path:浏览器访问的页面路径
    component 这个路径所映射的页面组件

    2、路由重定向的配置
    项目打开时的页面路径是 / 
    当访问 / 的时候需要配置一个重定向 redirect 将 / 从定向到指定页面

    3、404页面兜底
    当用户访问的页面在路由表中没有定义 此时需要有一个兜底页面
    path: '*', component: 404页面
    并且这个兜底应该写在数组的最底部

    二、路由的跳转
    1、使用a标签可以实现路由的跳转 配置href属性的时候要在前面添加一个 #333
    例如 < a href="#/home">
    2、使用声明式导航 使用VueRouter提供的标签实现跳转 配置to属性
    例如
    使用声明式导航跳转可以实现样式高亮 
    3、使用编程式导航 this.$router.push()实现页面的跳转
      (1)this.$router.push({path: '/home'}) => this.$router.push('/home') 简写方式
      (2)this.$router.push({name: 'home'})

    三、路由携带参数
    1、声明式导航携带参数
      (1)query传参
      (2)params传参(动态路由传参)艺术 高级 优雅 层级明确
       
        在路由表中需要配置path {path: '/home/:id'}
    2、编程式导航携带参数
      (1)通过path跳转
        this.$router.push({path: '/home', query: {id: 123}}) => this.$router.push('/home?id=123')
      (2)通过name跳转
        this.$router.push({name: 'home', query: {id: 123}})
        this.$router.push({name: 'home', params: {id: 123}})
    
    四、路由获取参数
      1、this.$route.query 获取query传递的参数
      2、this.$route.params 获取params传递的参数 获取动态路由传递的参数

相关内容

热门资讯

超6300亿元!A股银行“分红... 7月25日,成都银行完成权益分派股权登记,将于7月28日发放现金红利,这标志着A股上市银行2024年...
老铺黄金:2025年上半年单个... 7月27日晚,老铺黄金(HK06181)披露2025年中期业绩预告。预计2025年上半年实现销售业绩...
保险行业2025年上半年回顾与... 今天分享的是:保险行业2025年上半年回顾与未来展望 报告共计:59页 2025年上半年保险行业回顾...
数币App上新!消费者、商户两... 数字人民币试点持续推进,相关数字钱包手机应用程序功能也在优化中。7月21日,北京商报记者注意到,日前...
A股热点迭出,个股连续涨停!资... 近段时间以来A股市场整体走势较为强劲,上周以来在雅江概念集体上行的推动下涨势更为明显,主要指数不同程...
原创 印... 令人惊讶的是,印度人开始反思自身制造业的发展状况。印度经济学家帕纳加利亚指出,印度原本有机会在20年...
首创证券拟赴港上市,“A+H”... 首创证券在A股上市不足三年便启动赴港上市计划。近日,首创证券公告称,公司董事会已审议通过了公司拟发行...
肥东杨大爷要帮“儿子”还钱,银... “儿子”在外借了2万元还不上 “要债人”电话直接打了过来 还?还是不还? 7月6日 肥东县公安局梁园...
A股上周16家上市公司公布并购... 转自:扬子晚报 扬子晚报网7月27日讯(记者 范晓林 薄云峰)近段时间以来,A股市场并购重组活跃度持...
独家|某股份行改动零售业务关键... 在资产端信贷“投不动”(多家行零售信贷增速连续几个季度放缓、更有甚者个贷投放负增长)、负债端存款“定...
四川五日游报团指南及详细行程,... 四川,这片位于中国西南的神奇土地,以其独特的自然风光、丰富的文化遗产和诱人的美食而闻名遐迩。从成都的...
原创 中... 在2025年4月初,时任美国总统的特朗普正式启动了针对世界各国的关税战,旨在通过实施经济制裁来促进美...
牛市主升浪开启了?别急!珍惜布... 本周,A股市场上行,主要宽基指数都收获了或多或少的周涨幅,其中,科创50、微盘股涨幅居前。板块方面,...
公募二季报两大看点!港股配置逼... 本报(chinatimes.net.cn)记者栗鹏菲 叶青 北京报道 2025年公募基金二季报披露收...
长和出售港口磋商期或延长 随着可能出现的各方介入及交易结构变化,此次长和港口出售交易如继续进行,其复杂性会提升 文 |《财经》...
中航重机涨0.17%,成交额4... 来源:新浪证券-红岸工作室 7月25日,中航重机涨0.17%,成交额4.14亿元,换手率1.52%,...
重仓电子和新能源行业 【深圳商报讯】(记者 陈燕青)基金二季报出炉,公募二季度依然重仓电子、新能源、食品饮料等行业。公募排...
大婚之后,大笔减持!昔日全球首... 当地时间7月25日,亚马逊公司提交至美国证券交易委员会的文件显示,前全球首富、亚马逊创始人杰夫·贝索...
创源股份涨2.32%,成交额3... 来源:新浪证券-红岸工作室 7月25日,创源股份涨2.32%,成交额3.50亿元,换手率8.32%,...
筹备登陆韩国综合股价指数!大韩... 近日,大韩造船(Daehan Shipbuilding)的首次公开募股(IPO)发行价最终确定为每股...