电商平台项目----项目搭建

目录

项目介绍

其他配置

eslint 校验功能关闭

src文件简写方法，配置别名

项目路由分析（vue-router）

路由

路由组件

完成非路由组件 Header Footer 组件

步骤

配置less

路由组件的搭建-

路由组件与非路由组件的区别

$router与$route

路由的跳转

组件的显示与隐藏

路由传参

第一种

第二种 模板字符串

第三种 对象 需要路由配置name（命名路由）

接收

面试题

路由传递参数（对象写法）path是否可以结合params一起使用？

如何指定params可传可不传？

params传递的是空串如何解决

路由组件可以传递props数据？

报错

重写push与replace方法

cla||apply区别

---

项目介绍

vue cli 脚手架初始化项目

node + webpack+ 淘宝镜像

• node_modules:项目依赖文件
• public：存放静态资源（图片）webpack打包时会原封不动的放到dist目录
•  src源代码

1.     assets 放置静态资源 webpack打包时，会把静态资源当做一个模块打包到js里
2.     components:非路由组件
3.     App.vue 根组件 (.vue)
4.     main 入口文件(整个程序最先执行的文件)

• babel.config 配置文件(babel相关)
• package.json:记录项目依赖

其他配置

eslint 校验功能关闭

声明变量没有使用 eslint 校验工具报错

在根目录下创建一个 vue.config,js { lintOnSave: false }

src文件简写方法，配置别名

创建jsconfig.json文件 【@】代表src文件夹，不可以在"node_modules", "dist"使用

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": [
                "src/*"
            ]
        }
    },
    "exclude": [
        "node_modules",
        "dist"
    ]
}

项目路由分析（vue-router）

路由

前端所谓的路由kv键值对   key：URL(地址栏中的路径)  value：相对应的组件

路由组件

Home首页路由组件 Search搜索组件 login登录组件 Refister注册组件

非路由组件：

Header(首页，搜索页)

Footer(首页，搜索页) 登录页，注册没有

完成非路由组件 Header Footer 组件

步骤

书写静态页面   拆分组件   获取服务器数据动态展示  完成交互逻辑

使用组件 [非路由组件]：创建或者定义 引入 注册 使用

配置less

浏览器不识别less,需要通过 less less-loader 配置版本5   组件中加 style lang="less"

路由组件的搭建-

vue-router配置路由：放置在router文件中 

main的js挂载     //注册路由：kv一致省略v（小写）    //注册路由信息：组件身上拥有$router与$route

app.vuez主页面放router-view 路由容器

路由组件与非路由组件的区别

components:放置非路由组件  pages【views】:放置路由组件

路由组件需要在router文件中注册（使用的是组件的名字）

重定向：在项目跑起来之后，立马定项到首页 redirect

$router与$route

route:获取路由信息[路径 ,query,params 参数]

router（路由器）：编程式导航跳转【push/replace】

push压栈有记录 replace替换

路由的跳转

声明式导航 router-link 必须有to属性

编程时导航 router.push，replace

声明式能做的编程式都可以编程式,可以做业务逻辑

组件的显示与隐藏

Footer： Home Search显示 登录注册时不显示

使用v-show 控制display：none 减少重排和重绘

可以使用route的路由信息 $route.path == '/Home'（不推荐）

可以使用路由元信息:配置路由时使用meta v-show="$route.meta.show"

路由传参

声明式导航 router-link 必须有to属性

编程时导航 router.push，replace

params：参数属于路径的一部分（配置路由时需要占位）path: '/Search/:keyWord',

query：类似以ajax中的queryString/home?k=v&k=v(不需要占位)

第一种

this.$router.push("/Search/" + this.keyWord + "?k=" + this.keyWord.toUpperCase())

第二种 模板字符串

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

第三种 对象 需要路由配置name（命名路由）

    this.$router.push({
        name: "Search",
        params: this.keyWord,
        query: { k: this.keyWord.toUpperCase() },
      });

接收

params路径参数----{{ this.$route.params.keyWord }}

query参数-----{{ this.$route.query.k }}

面试题

路由传递参数（对象写法）path是否可以结合params一起使用？

对象的的写法 不可以结合path一起使用 要使用name

如何指定params可传可不传？

配置路由的的时候占位了，但是路由跳转的时候不传递路径会出问题

在配置路由的加上一个问号代表可有可无path: '/Search/:keyWord?',

params传递的是空串如何解决

使用undefined解决：params: this.keyWord||undefined

路由组件可以传递props数据？

三种写法

路由配置props：true 只可以传递params

对象写法prors{a：1,b:2}

函数写法 可以把params，query参数通过props组件传递给路由组件

报错

Uncaught TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_0__.defineComponent) is not a function

 卸载当前vue-router版本

 使用低版本 npm  install vue-router@3

重写push与replace方法

编程式路由导航跳转(参数不变) 多次执行会抛出 navigation的警告 声明式导航没有此类问题，内部已经处理

"vue-router": "^3.5.3" 引入了promise

必须传入成功或者失败的回调可以解决 传入一个空函数结果为undefined promise为成功

this.$router.push(
        {
          name: "Search",
          params: this.keyWord,
          query: { k: this.keyWord.toUpperCase() },
        },
        () => {},
        () => {}
      );

从根本解决问题、

this：组件实例

this.$router属性：是一个对象属性值是vueRouter的实例(注册路由时，给组件实例添加的$router $routets属性)、let $router=new vueRouter

push 是 vueRouter原型上的方法 push方法的上下文应该为vueRouter类的一个实例，也就是 $router

//先把VueRouter的push方法保存一份
let orginPush = VueRouter.prototype.push;
// 重写push、replace
// 第一个参数告诉push往那跳（传递的参数）
VueRouter.prototype.push = function (location, reslove, reject) {
    //this为VueRouter的实例
    if (reslove && reject) {
        // orginPush() this为window 应该保证为VueRouter的实例
        orginPush.call(this, location, reslove, reject)
    } else {
        orginPush.call(this, location, () => { }, () => { })
    }
}
let orginReplace = VueRouter.prototype.replace;
VueRouter.prototype.replace = function (location, reslove, reject) {
    //this为VueRouter的实例
    if (reslove && reject) {
        orginReplace.call(this, location, reslove, reject)
    } else {
        orginReplace.call(this, location, () => { }, () => { })
    }

}

cla||apply区别

// 都可以调用函数一次，可以修改this指向

// 传参格式不一样 call参数用逗号隔开 apply为数组

// bind会立即调用函数一次