vue尚品汇商城项目-day01【7.路由传参】

举报
刘大猫 发表于 2024/10/09 20:37:58 2024/10/09
【摘要】 vue尚品汇商城项目-day01【7.路由传参】

在这里插入图片描述
@[toc]

7.路由传参

7.1路由跳转有几种方式?

比如:A -> B

  • 声明式导航:router-link(务必要有to属性),可以实现路由的跳转。

  • 编程式导航:利用的是组件实例的$router.push|replace方法,可以实现路由的跳转。(可以书写一些自己的业务)

7.2路由传参,参数有几种写法?

  • params参数:属于路径当中的一部分,需要注意,在配置路由的时候,需要占位。
  • query参数:不属于路径当中的一部分,类似于ajax中的queryString /home?k=v,不需要占位。

注意点1:路由当中的占位符用的是:,比如path: ‘/search/:keyword’,其中:keyword就代表参数的占位符

//配置路由
export default new VueRouter({
    routes:[       
        {
            path: '/search/:keyword',
            component: Search,
            meta:{"isShow": true}
        }
    ]
})

注意点2:在路由传参中如果使用params方式且路由传参使用对象方式的话,再进行路由配置时必须设置相应的name属性才行,否则会导致传参失效。

注意点3:标签<router-link>中传参使用对象方式,请使用:to="{}",而不是:to={}

注意点4:路由传参的3种写法

methods:{
    //搜索按钮的事件处理函数,用于跳转到search路由组件当中
    goSearch() {
      //路由传递参数
      //第1种:字符串形式
      this.$router.push("/search/" + this.keyword + "?k=" + this.keyword.toUpperCase())
      //第2种:模板字符串
      this.$router.push(`/search/${this.keyword}?k=${this.keyword.toUpperCase()}`)
      //第3种:对象,其中params和query对象属性中的key属性名称加不加双引号都是可以识别的
      this.$router.push({name: 'search', params:{keyword:this.keyword}, query:{k:this.keyword.toUpperCase()}})
    }
  }

本人其他相关文章链接

1.vue尚品汇商城项目-day00【项目介绍:此项目是基于vue2的前台电商项目和后台管理系统】
2.vue尚品汇商城项目-day01【1.vue-cli脚手架初始化项目生成文件的介绍】
3.vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】
4.vue尚品汇商城项目-day01【3.项目路由的分析】
5.vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
6.vue尚品汇商城项目-day01【5.路由组件的搭建】
7.vue尚品汇商城项目-day01【6.Footer组件的显示与隐藏】
8.vue尚品汇商城项目-day01【7.路由传参】
9.vue尚品汇商城项目-day01【8.路由跳转与传参相关面试题】

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。