vue配置路由并传递参数

一. 配置路由的 index.js 文件

  • 在router文件夹中新建 index.js 文件

  • 导入vue,vue-router 以及路由模块

  • 使用路由模块

  • 导出VueRouter

  • 配置路由

此代码为一个路由数组(注意是routes);
第一项包含redirect参数,表示默认路径,其中的query表示路由传递的参数,为object类型;


二. 使用路由

  • 在router-link的标签中绑定
  • :to="{path:'/sales',query:{type:'All'}}"
    path表示路由路径,query表示路由传递的参数obj
  • tag='div'
    router-link的标签页面中默认渲染为 a标签,通过这个参数可改变,此代码表示渲染为 div 标签

三. 目标模块中获取传递参数

在路由至的目标模块中,想要获取通过路由传递的参数
可通过 this.$route.query.type 获取,如下图所示

最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容