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

野性酷女 2024-03-24 12:25 17阅读 0赞

![在这里插入图片描述][201cb7e59bb94276b20be0c55371360b.jpeg_pic_center]

#### 文章目录 ####

*   *  7.路由传参
     *   *  7.1路由跳转有几种方式？
         *  7.2路由传参，参数有几种写法？
 *  本人其他相关文章链接

### 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的前台电商项目和后台管理系统】][vue_-day00_vue2]  
2.[vue尚品汇商城项目-day01【1.vue-cli脚手架初始化项目生成文件的介绍】][vue_-day01_1.vue-cli]  
3.[vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】][vue_-day01_2.vue-cli]  
4.[vue尚品汇商城项目-day01【3.项目路由的分析】][vue_-day01_3.]  
5.[vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】][vue_-day01_4._Header_Footer]  
6.[vue尚品汇商城项目-day01【5.路由组件的搭建】][vue_-day01_5.]  
7.[vue尚品汇商城项目-day01【6.Footer组件的显示与隐藏】][vue_-day01_6.Footer]  
8.[vue尚品汇商城项目-day01【7.路由传参】][vue_-day01_7.]  
9.[vue尚品汇商城项目-day01【8.路由跳转与传参相关面试题】][vue_-day01_8.]

[201cb7e59bb94276b20be0c55371360b.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/de4c3eab06834af0ae9cddc65eaaa619.png
[vue_-day00_vue2]: https://blog.csdn.net/a924382407/article/details/129880297
[vue_-day01_1.vue-cli]: https://blog.csdn.net/a924382407/article/details/129879169
[vue_-day01_2.vue-cli]: https://blog.csdn.net/a924382407/article/details/129879406
[vue_-day01_3.]: https://blog.csdn.net/a924382407/article/details/129881128
[vue_-day01_4._Header_Footer]: https://blog.csdn.net/a924382407/article/details/129881205
[vue_-day01_5.]: https://blog.csdn.net/a924382407/article/details/129881287
[vue_-day01_6.Footer]: https://blog.csdn.net/a924382407/article/details/129881425
[vue_-day01_7.]: https://blog.csdn.net/a924382407/article/details/129882067
[vue_-day01_8.]: https://blog.csdn.net/a924382407/article/details/129882108