vue常见的问题（vue 问题）

今天给各位分享vue常见的问题的知识，其中也会对vue 问题进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、vue-router使用过程遇到的问题
• 2、vue 页面空白问题总结
• 3、小白研究项目部署-关于vue项目部署遇到的一些问题
• 4、有关vue的常见面试题（上）

vue-router使用过程遇到的问题

初学vue问题记录

问题一、vue-router使用过程遇到的登录页空白问题

之前用vue-cli创建了一个vue项目，默认使用vue-router，目录结构中自带了router目录，里面有index.js

但是当我又创建一个项目的时候默认没有使用vue-router时，后面我使用npm install vue-router安装了插件之后项目中没有自动创建router目录。查找资料显示说这种方式不会创建router目录，自己就把前面创建的项目的router目录及里面的文件拷贝过来使用。

使用的过程中，新建立的项目我自己单独写了一个Login.vue，想把这个登录页面作为首页，使用vue-router配置。我就修改了router目录的index.js。如下：

main.js中引入router.js。如下：

到这里就是我找到的资料要配置登录页的，加上我不使用router-link，我就没有修改App.vue。我以为都配置完成了，就直接启动项目，发现页面空白。后来才发现App.vue中没有使用router-view/router-view。在App.vue加入router-view/router-view启动就成功显示登录页面了。

总结：使用vue-router，

1.需要在router目录的index.js维护好路由

2.main.js中引入router下文件

3.App.vue中使用router-view

最后还发现了一个问题，用 访问title上的favicon没有显示；

用访问title上的favicon就能显示

通过测试发现，好像是浏览器缓存问题，清除浏览器缓存又可以正常显示了。

问题二、使用vue-router过程中，子路由不显示问题

问题描述，我的项目是一个登录页面，项目默认显示登录页面；登录成功后显示登录成功后的默认页面，我的默认页面是由header公共导航和内容组件组成，这个时候出现了问题，header部分组件显示正常，但是内容组件不显示。经过分析查阅资料是因为父路由组件没有使用router-view导致的。我的header组件是由两个组件组成的，就在header组件内加上router-view登录成功后的默认页面就显示正常了。

HeadLayout.vue中增加router-view，解决子路由不显示问题

总结：要使用路由一定要在使用router-view，要在父级组件中使用。

问题三、子路由跳转问题

问题描述：原本MainMenu.vue中使用的是a链接，我添加的click方法进行路由切换，但是总是失败，切换后一闪第二个页面的内容，然后又显示第一个页面内容。写法如下：

第二个子路由页面内容闪一下

最终显示第一个子路由页面内容

这个a链接click的问题原因出现在href上，我只是清空了里面的内容，需要删除该属性，或者将值改为href="javascript:;"，

解析参照：

自己换成router-link实现路由切换，可以正常切换。另外要在router-link上使用click方法切换路由，而不使用to属性，需要使用native修饰符。@clike.native

但是还有一个问题就是我加了一个样式，给router-link，想让激活的link带背景色。我这种写法两个都有这个样式

.router-link-active {

background: #848484;

}

效果如下：

于是我又弃用click了，直接使用to属性才没有问题。

vue 页面空白问题总结

页面空白我遇到的就如下几种情况

1.路由异常，

一般是next()函数没有被执行

不执行的原因就是在 beforeEach 里

a.if判断的某个分支让它没有走next()

b.某个异常跳出导致没有执行

c.网络请求 只处理了then的情况，没有处理catch情况

2.html渲染报错，常见的就是key相同了

3.js解析报错，常见的es6语法在某些手机里不支持，特别是对象扩展符(...),promise的finally不支持等等。

4.网络请求异常导致的， 特别是 跨域请求异常 导致的，经常出现这个情况

小白研究项目部署-关于vue项目部署遇到的一些问题

在搞清root，alias，try_files的基本用法后，我开始尝试vue项目的部署。

（用法我之前的文章也研究过）

此前，听说挺多小伙伴会遇到vue-router-history模式种种问题，比如路径无法匹配，找不到静态资源，刷新页面404，etc...

不急，只要找到原因，问题是可以迎刃而解的。

项目部署环境一般可以分为三种：生产环境，测试环境，开发环境。

开发环境 ：开发环境时程序员专门用于开发的服务器，配置可以比较随意，为了开发调试方便，一般打开全部错误报告和测试工具，是最基础的环境。

生产环境 ：生产环境是指正式提供对外服务的，一般会关掉错误报告，打开错误日志，是最重要的环境。部署分支一般为master分支。

测试环境 ：一般是克隆一份生产环境的配置，一个程序在测试环境工作不正常，那么肯定不能把它发布到生产服务器，是开发环境到生产环境的过渡环境。

测试环境的分支存在bug，一般不会让用户和其他人看到，并且测试环境会尽量与生产环境相似。

如何区分生产环境和开发环境？

process.env.NODE_ENV 是 node 的全局变量 process 的一个属性，它的作用是区分当前环境是生产环境还是开发环境，

可以参考学习： 理解webpack中的process.env.NODE_ENV

其实一般的vue单页面应用项目中，遇到路径无法匹配，或者资源引用错误问题都是由于以下几个属性造成的，如果你经常翻官网文档，那看到这里应该就已经会意，他们分别是：

接下来我将讲解以下这几个属性的使用。

依照官网的解释，贴一张用法图：

当使用基于 HTML5 history.pushState 的路由时，“相对 publicPath” 会受到限制，即是说在使用history模式时，publicPath需要设置为绝对路径。那么在vue.config.js文件中，你应该这样配置：

在nginx配置文件中你就需要这样配置：

假设我的项目名为history，并且放在/usr/local/webserver/nginx/myProject 目录下，如tree图

示例贴一下： 珂朵莉的服务器 (点击about会使用路由跳转)

如果你的配置出现页面空白，或者404访问错误，资源引用问题（F12可观察），这时你就要检查publicPath，assetsDir甚至是nginx有没有配置正确了。

我觉得原因是页面刷新时，服务器找不到任何的静态资源，就报404，那么解决办法就简单了： 你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。即使用try_files 寻找index.html。

可以参考本项目的nginx配置：

但如此配置后，你的服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件。为了避免这种情况，你应该在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。

参考官网例子：

另一方面,有可能是Vue-Router没有配置好，需要注意初始化Router时候的base参数:

如此项目部署就完成了。

感谢博哥指出之前文章错误之处，已经修正，谢谢

有关vue的常见面试题（上）

防抖 ：一个频繁触发的函数，在规定时间内，只让最后一次生效，前面的不生效。

例：防抖经常用在我们搜索框输入搜索，点击提交，防止等；

节流 ：一个频繁触发的函数，在规定时间内，函数执行一次后，只有大于设定的执行周期后才会执行第二次。

例：节流一般在onresize、mousemove、滚动事件等事件中使用，防止过多的请求造成服务器压力

盒模型的组成：元素的内容content、元素的内边距padding、元素的外边距margin、元素的边框border

盒模型分为 ： W3C标准盒子 、IE盒子

W3C标准盒子（content-box） ：又称内容盒子，是指块元素box-sizing属性为content-box的盒模型，盒子总宽度 = margin + border + padding + width

IE盒子（border-box） ：又称怪异盒模型（边框盒子），是指块元素box-sizing属性为border-box的盒模型，盒子总宽 = margin + width

1.toString()与join()一样都是把数组转成以逗号分割的字符串

2.pop() 删除数组的最后一项

3.push() 往数组最后添加新数据

4.shift() 删除数组最前面的一项

var定义的变量可以修改，如果不初始化会输出undefined，不会报错。

const定义的变量不可以修改，而且必须初始化

let是块级作用域，函数内部使用let定义后，对函数外部无影响。

1.都支持服务器端渲染

2.都有虚拟dom,组件化开发,都有‘props’的概念,允许父组件往子组件传送数据,都实现webComponent规范

3.数据驱动视图

4.都有支持native的方案,React的React native,Vue的weex

5.构建工具

React和Vue都有自己的构建工具，你可以使用它快速搭建开发环境。React可以使用Create React App (CRA)，而Vue对应的则是vue-cli。都有管理状态，React有redux,Vue有自己的Vuex

设计思想

react

1.函数式思想，all in js ,jsx语法，js操控css

2.单项数据流

3.setState重新渲染

4.每当应用的状态被改变时，全部子组件都会重新渲染。当然，这可以通过shouldComponentUpdate这个生命周期方法来进行控制，如果为true继续渲染、false不渲染，但Vue将此视为默认的优化。

vue

1.响应式思想，也就是基于数据可变的。把html、js、css、组合到一起，也可以通过标签引擎组合到一个页面中

2.双向绑定，每一个属性都需要建立watch监听（页面不用，涉及到组件更新的话需要）

3.Vue宣称可以更快地计算出虚拟 DOM的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树

性能

react ----大型项目、优化需要手动去做，状态可控

vue ------中小型项目、状态改变需要watch监听，数据量太大的话会卡顿

扩展性

react

1 类式写法api少，更容易结合ts

2 可以通过高阶组件来扩展

vue

1 声明式写法，结合ts比较复杂

2 需要通过mixin方式来扩展

vue-router提供了导航钩子:全局前置导航钩子 beforeEach和全局后置导航钩子 afterEach

导航钩子3个参数(to,from,next):

到达这个组件时：

离开这个组件时：beforeRouteLeave:(to,from,next)={}

确认离开next();取消离开next(false)；

beforeEnter:(to,from,next)={}，用法与全局守卫一致。只是，将其写进其中一个路由对象中，只在这个路由下起作用。

方法一：

子组件绑定一个事件，通过 this.$emit() 来触发

在子组件中绑定一个事件，并给这个事件定义一个函数

在父组件中定义并绑定 handleChange 事件

方法二：

通过 callback 函数

先在父组件中定义一个callback函数，并把 callback 函数传过去

在子组件中接收，并执行 callback 函数

方法三：

通过 $parent /$children 或 $refs 访问组件实例

这两种都是直接得到组件实例，使用后可以直接调用组件的方法或访问数据。

这种方式的组件通信不能跨级

方法四：

$attrs和$listeners

关于vue常见的问题和vue 问题的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。