前言

将所学融入实际项目开发中，根据尚硅谷教学来进入实战，冲冲冲，下面是笔记。
用的vue2，但是和3好接近啊目录什么的，奇怪

1 vue-cli脚手架初始化项目

1.1 node+webpack+淘宝镜像（有节点不需要）

node_modules文件夹：项目依赖
public文件：静态资源（图片），需要注意，在此之中的静态资源，webpack进行打包的时候，会原封不动的打包到dist文件夹中

1.2 src文件夹中（程序猿源代码文件中）：

assets文件夹：静态资源：放置多个组件工艺的静态资源，需要注意，放置在assets文件夹中的静态资源，在webpack打包时webpack会把静态资源当做一个模块，打包到js文件中。
components文件夹：一般防止非路由组件，常用的全局文件。
App.vue：唯一的根组件，vue当中的组件（.vue）
main.js：程序的入口文件，也是程序最新执行的文件

babel.config.js：js配置文件（babel相关），兼容文件，配置文件es6翻译为es5

package.json文件：认为是项目的身份证，记录信息，项目名称，项目版本，依赖，怎么运行，缓存

package.lock.json文件：缓存性的文件，依赖的来源

2 项目的其他配置

2.1：项目运行起来的时候，让浏览器自动打开

package.json：
  "scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

2.2 eslint校验功能关闭

在vue.config.js中：
lintOnSave: false

2.3 src文件夹里简写方法，配置别名： @ 代表src文件

3 项目路由的分析

3.1vue-router

前端所谓路由：kv键值对。
key：url（地址栏路径）
value：相应的路由组件
注意：项目是上中下结构，
home：首页路由组件，search：搜索路由组件，login路由组件，register注册路由
非路由组件：
header 首页，搜索页，登录，注册
与footer（在首页，搜索页，在其他没有没有）

不以这个为主，主要搞业务没逻辑
1：书写静态页面（html+css）
2：拆分组件
3：获取服务器的数据动态展示
4：完成相应的动态业务逻辑

注意：
1.创建组件的时候，组件结构+组件的样式+图片资源
2.项目采用less样式，浏览器不识别less样式，需要通过less，less-loader(5版本)进行处理less，把less样式变味css样式，浏览器才可以识别
3.如果想要组件识别less样式，需要在style属性中添加lang = ’less‘，

4 使用组件的步骤（非路由组件）

-创建或者定义
-引入
-注册
-使用

5路由组件的搭建

vue-router
在上面的分析的时候，路由组件应该有四个：Home，Search，Login，Register
-components文件夹：经常放置的非路由组件（共用全局组件）
-pages|views文件夹：经常放置路由组件

5.1配置路由

项目当中配置的路由一般放置在router文件夹中

5.2总结

路由组件与非路由组件的区别？
1：路由组件一般放在pages|views文件夹中，非路由组件一般放置在components文件中，
2：路由组件一般需要在router文件夹中进行注册（使用的即为组件的名字），非路由组件在使用的时候，一般用标签的形式
3：注册完路由，不管是路由组件，还是非路由组件身上都有$route， $router属性。
$route:一般获取路由信息【路径，quert，params等】
$router：一般进行编程式导航进行路由跳转【push|replace】

5.3路由的跳转？

路由的跳转有两种：
声明式导航router-link，可以进行路由的跳转
编程式导航push|replace 可以进行路由的跳转
编程式导航：声明式导航能做的，编程式导航都能做，还可以做一些其他的业务逻辑。

6Footer组件的显示与隐藏：v-if|v-show

在Home，Search显示，在Login，Register注册的时候隐藏

6.1我们可以根据组件身上的$routr获取当前路由的信息，通过路径判断Rooter的显示与隐藏。
6.2配置路由的时候，可以给路由添加路由元信息【meta】，路由需要配置对象。

7路由传参

7.1：路由跳转方式有几种？
比如：A->B
声明式导航：router-link（务必要有to属性），可以实现路由的跳转
编程式导航：利用的是组件实例的$router.push|replace方法，可以实现路由的跳转（书写一些自己的业务）
7.2路由传参：参数有几种写法？
params参数：属于路径当中的一部分，需要注意，在配置路由的时候，需要占位
query参数，不属于路径当中的一部分，类似于ajax中的queryString /home？k=v&kv=，不需要占位置

8路由传参相关面试题：

1：路由传递参数（对象写法），path是否可以结合params参数一起使用？
2：如何指定params参数可传可不传？
比如：配置路由的时候，占位了（params参数），但是路由跳转的时候就不传递
路径会出现问题如下:
http://0.0.0.0:8080/?#/?k=QS
正确的：
http://0.0.0.0:8080/?#/search/qs/?k=QS

3：params参数可以传递也可以不传递，但是如果传递是空船，如何解决？
4：路由组件能不能传递props数据？

8.1路由传参

//第一种：字符串形式

this.$router.push(
        "/search/" + this.keyword + "?k=" + this.keyword.toUpperCase()
      );

//第二种：模板字符串

  `/search/${this.keyword}?k=${this.keyword.toUpperCase()}`
);

//第三种：对象形式利用name

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

8.2面试题

面试题1：路由传递参数（对象写法），path是否可以结合params参数一起使用？
 答：路由跳转传参的时候，对象的写法可以是name，path形式，但是需要注意的是，path这种写法不能与params参数一起

this.$router.push({path:'/serach',params:{ keyword: this.keyword },query: { k: this.keyword.toUpperCase() }})

面试题2：如何指定params参数可传可不传？
如果路由妖气传递params参数，但是你就不传递params参数，发现一件事情，url会有问题
如何指定params参数可以传递，或者不传递，在配置路由的时候，在站位的后面加上一个问号？，【代表params参数可以传递或者不能传递】

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

面试题3：params参数可以传递也可以不传递，但是如果传递是空值，如何解决？
答：使用undefined解决：params参数可以传递，不传递（空的字符串）

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

面试题4：路由组件能不能传递props数据？
可以的：三种写法
路由组件能不能传递props数据？
router文件里面
第一种：布尔值写法

props:true

第二种：对象写法

props:{a:1,b:2},

//第三种：函数写法：可以params参数，query参数，通过props传递给路由组件

props:($route)=>{
         return{keyword:$route.params.keyword,k:$route.query.k}
     },

    //简写

     props: ($route) => ({
       keyword: $route.params.keyword,
       k: $route.query.k,
     });

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

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

9.1为什么编程式导航有这种问题，

“vue-router”: “^3.5.3” 最新的vue-router引入了params，
因为push方法会返回一个params对象

9.2解决方式：给push传递相应的成功、失败的回调函数

this.$router.push(
       {
         name: "search",
         params: { keyword: this.keyword },
         query: { k: this.keyword.toUpperCase() },
       },
       () => {},
       (error) => {console.log(error)}
     );

此方法治标不治本，在别的组件中还要这样处理。

9.3this：当前组件实例（search）

this$router属性：当前的属性，属性值VueRouter类的一个实例，当在入口文件注册路由的时候，给组件实例添加$router|$router属性
push是VueRouter类的一个实例
重写VueRouter原型的push和replace方法

//先把VueRouter原型对象的push方法先保存一份
let originPush = VueRouter.prototype.push;
let originReplace = VueRouter.prototype.replace;
//重写push|replace方法
// location：路由往哪里跳转
// call|apply区别
// 相同点：都可以调用函数一次，都可以篡改函数的上下文一次
// 不同点：call与apply传递参数：call传递参数用逗号隔开，apply方法执行，传递数组

VueRouter.prototype.push = function (location, resolve, reject) {
  if (resolve && reject) {
    originPush.call(this, location, resolve, reject);
  }
  else {
    originPush.call(this, location, () => { }, () => { });
  }
}

// 重写replace方法

VueRouter.prototype.replace = function (location, resolve, reject) {
  if (resolve && reject) {
    originReplace.call(this, location, resolve, reject);
  }
  else {
    originReplace.call(this, location, () => { }, () => { });
  }
}