【vue2】电商项目复习

【vue2】电商项目复习

跑别人项目

如果有报错，需要先执行npm i --legacy-peer-deps

粘贴文件CSS样式

使用.DOC文件的style样式时，因为空格原因会报错，可以先用WPS文档替换一下空格键

路由传参

参数分

params参数路径参数

query参数查询字符串

想要拿到路径参数需要在路由规则的path上添加:(参数名)例如path：'/search/:keyword?'

:表示keyword为路径参数

?可以当携带查询字符串参数到这个地址时，使路径上还有keyword

1、字符串形式

this.$router.push('/Search/' + this.keyword + '?k=' + this.keyword.toUpperCase())

2、模板字符串

this.$router.push(`/Search/${
     this.keyword}?k=${
     this.keyword.toUpperCase()}`)

3、对象(最常用)

this.$router.push({
    name: 'Search', params: {
    keyword: this.keyword }, query: {
    k: this.keyword.toUpperCase() })

使用对象形式传递参数时需要在该路由规则添加name属性

三级联动组件

当一个组件在多个页面都有出现时，就可以把他注册成一个全局组件

例如要注册一个叫TypeNav.vue

在main.js中

Vue.component(TypeNav.name, TypeNav)

参数1：组件的名字

参数2：组件实体

就可以在任意组件中使用

axios二次封装

可以添加默认地址baseURL，timeout响应时长，

例