vue2项目（一）

项目介绍

电商前台项目

技术架构：vue+webpack+vuex+vue-router+axios+less..

封装通用组件
登录注册
token
购物车
支付
项目性能优化

一、项目初始化

使用vue create projrct_vue2在命令行窗口创建项目

1.1、脚手架目录介绍

css 复制代码

├── node_modules:放置项目的依赖
├── public:一般放置的是静态资源（图片），需要注意：放在public文件夹中的静态资源，webpack进行打包的时候，会原封不动打包到dist文件夹中，不会当做一个模块打包到 JS 里面
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src:程序员源代码文件夹
│   ├── assets: 存放静态资源(一般放置多个组件公用的的静态资源），需要注意：放置在assets文件夹里面的资源，webpack打包的时候，会把静态资源当做一个模块，打包到JS文件里面
│   │   └── logo.png
│   │── component: 存放组件【一般放置的是非路由组件（全局组件）】
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件(唯一的根组件，Vue当中的组件都是(.vue))
│   │── main.js: 入口文件(程序的入口文件，也是整个程序当中最先执行的文件)
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件(记录着项目信息，叫什么...有哪些依赖...项目怎么运行...) 
├── README.md: 应用描述文件，说明性文件
├── package-lock.json：包版本控制文件,缓存性文件

1.2、项目的其他配置

2.1、项目运行起来的时候，让浏览器自动打开。【我不想把默认浏览器设置成Google，但是又想调整项目的时候使用Google浏览器，所以我选择手动打开，没有修改此处的文件】

找到package.json文件，找到"scripts"进行如下修改：

2.2、eslint语法校验功能关闭。

修改vue.config.js文件：

2.3、src文件夹简写方法，配置别名。【默认配置好了的】

在jsconfig.json文件中。@代表的是src文件夹，这样将来文件过多，找的时候方便很多。

二、项目的路由分析及搭建

2.1、项目的路由分析

本项目和品优购差不多，上中下结构的

前端所谓路由：key-value键值对

key：URL（地址栏中的路径）

value：相应的路由组件

非路由组件：

Header
Footer（首页，搜索页）

路由组件：

【Home首页】
【Search搜索】
【login登录（无Footer）】
【register注册（无Footer，可以通过条件渲染搞没）】

2.2、开发项目的步骤

书写静态页面（HTML，CSS）
拆分组件（路由/非路由）
获取服务器的数据动态展示
完成相应的动态业务逻辑

注意1：创建组件的时候，找准组件结构 + 组件的样式 + 图片资源

注意2 ：项目如果采用的less样式，浏览器不识别less样式，需要通过less、less-loader【安装6版本】进行处理less：npm i less-loader@6，如果想要组件识别less样式，需要在style标签加上lang="less"。

注意3 ：引入清除默认样式，将默认样式文件放在public文件夹内，在index.html里引入。 <link rel="stylesheet" href="<./css/reset.css">

2.3、非路由组件的搭建

非路由组件都搞在components文件夹里，本项目有Header和Footer

1、创建或定义组件

2、引入组件

3、注册组件

4、使用组件

2.4、路由组件的搭建

2.4.1、配置路由器

Vue2安装vue-router，命令：npm i vue-router@3

Vue3安装vue-router，命令：npm i vue-router

路由组件有四个：Home，Search，Login，Register（注册）

components文件夹：经常放置非路由组件（公用全局组件）

pages|views文件夹：经常放置路由组件

2.4.2、使用路由组件

用<router-view></router-view>指定展示位置，然后登录，注册，搜索这几个a标签都换成router-link标签，href换成to

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

路由组件一般放置在pages | views文件夹，非路由组件一般放置在components文件夹中
路由组件一般需要在router文件夹中的index.js文件中配置路由规则（使用路径和组件名字等属性），非路由组件在使用的时候，一般都是以标签的形式使用
注册完路由，不管是路由组件还是非路由组件，身上都有 route,router属性
- ** $route**：一般获取路由信息【路径，query，params等等】，其实非路由组件当中的this.$ route就是当前显示的路由组件的一些信息，比如路径，name，meta等
- $router：一般进行编程式导航进行路由跳转【push | replace】

2.4.4、重定向

在项目跑起来的时候，访问/，立马让他定向到首页写在 src/router/index.js文件里

2.4.5、路由跳转的两种方式

声明式导航router-link
编程式导航 push | replace

声明式路由导航可以做的事情编程式导航都能做 ，除此之外，编程式导航还能做一些其他的业务

显示或隐藏组件：v-if | v-show

Footer组件在 Home，Search中是显示的，在Login和Register中是隐藏的

我们可以根据**$route.path**是否是home或search来控制Footer的显示与隐藏

若有很多组件都要显示Footer，就要写很多，这样不方便且冗余。

路由元信息 | Vue Router

定义路由的时候可以配置 meta 字段：

**注意：**配置的路由的时候，可以给路由添加路由元信息【meta】，路由需要配置对象，它的key不能瞎写、胡写、乱写

四、路由传参

params和query参数可以一起传

4.1、路由跳转的两种方式

声明式导航：router-link（务必要有to属性）

编程式导航：利用的是组件实例的$router.push | replace 方法（可以书写一些自己的业务）

4.2、路由传参，参数的写法

params 参数:属于路径当中的一部分，需要注意，在配置路由的时候，需要占位

query参数:不属于路径当中的一部分，类似于ajax中的queryString /home?k=v&kv=,不需要占位

css 复制代码

methods: {
    //搜索按钮的回调函数，需要向search路由进行跳转
    goSearch() {
      //路由传递参数
      //第一种：字符串形式
      //this.$router.push('/search/' + this.keyword + '?k=' + this.keyword.toUpperCase());
      //第二种传参方式:模板字符串
      //this.$router.push(`/search/${this.keyword}?k=${this.keyword.toUpperCase()}`);
      //第三种传参方式:对象写法
      this.$router.push({
        // path: '/search',  注意：此处和params一起时不能用path只能name
        name: 'search',
        params: { keyword: this.keyword },
        query: { k: this.keyword.toUpperCase() },
      })
    },
  },

注意： 路由携带**params** 参数时，若使用to的对象写法，则不能使用++path配置项++ ，必须使用name配置！而且params需要去占位！

4.3、路由传参面试题

1、路由传递参数(对象写法) path是否可以结合params参数一起使用？

不可以。路由跳转传参的时候，对象的写法可以是name，path的形式，但需要注意的是，path这种写法不能与params参数一起使用

2、如何指定params参数可传可不传？

在配置路由的时候，给params占位的后面加上?，代表可传递也可以不传递

**例：**配置路由的时候如果已经给params参数占位了但不写问号，那么路由跳转的时候不传递params参数，路径就会出现问题。你跳转的本来是 http://localhost:8080/#/search/k=QWE 这个位置，结果你跳转的是 http://localhost:8080/#/k=QWE 这个位置，search路径直接没了

3、params参数可传递也可以不传递，但是如果传递是空串，如何解决？

若有占位符也有问号，但传递的是空串的话，路径也会有问题（和上面路径问题一样，search直接没了）。使用undefined解决：params参数可传递不可传递的时候，传递是空串路径有问题的错误

css 复制代码

  params:{keyWord:'' || undefined,},

4、路由组件能不能传递props数据？

可以的，有三种写法：对象式，布尔值，函数式

五、bug解决

编程式路由跳转到当前路由（参数不变），多次执行会抛出NavigationDuplicated的警告错误？

因为路由跳转有两种形式：声明式导航，编程式导航，其中声明式导航没有这类问题，因为vue-router底层已经处理好了

声明式导航router-link
编程式导航 push | replace

为什么编程式导航进行路由跳转的时候，就有这种警告错误？

1、"vue-router": "^3.6.5"：最新的vue-router引入promise，push返回的是promise，promise有两个形参，成功返回的函数和失败返回的函数

通过push方法传递相应的成功，失败的回调函数，可以捕获到当前错误，可以解决

通过下面的代码可以实现解决错误

css 复制代码

this.$router.push({
          // 第三种：对象写法
          name:'search',
          // params参数
          params:{
            keyWord:'' || undefined,
          },
          // query参数
          query:{
            k:this.keyWord.toUpperCase()
          }
        },()=>{},()=>{})

2、这种写法治标不治本，将来在别的组件当中 push | replace，编程式导航还是有类似错误

**this:**当前组件实例(search)
**this. $router属性:**当前的这个属性，属性值vueRouter类的一个实例，当在入口文件注册路由的时候，给组件实例添加$ router|$route属性
**push:**VueRouter类的一个实例

由于this是当前组件示例，$router是VueRouter的一个实例，它可以访问到VueRouter原型对象上的push，所以我们通过重写push方法，就可以解决问题。

vue2项目（一）

项目介绍

一、项目初始化

1.1、脚手架目录介绍

1.2、项目的其他配置

二、项目的路由分析及搭建

2.1、项目的路由分析

2.2、开发项目的步骤

2.3、非路由组件的搭建

2.4、路由组件的搭建

2.4.1、配置路由器

2.4.2、使用路由组件

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

2.4.4、重定向

2.4.5、路由跳转的两种方式

三、Footer组件的显示和隐藏--路由元信息

四、路由传参

4.1、路由跳转的两种方式

4.2、路由传参，参数的写法

4.3、路由传参面试题

五、bug解决