vue-router

什么是路由： 后端路由: 对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源 前端路由：对于单页面应用程序来说，主要通过URL中的hash（#号）来实现不同页面之间的切换 前端路由的后端路由的区分 后端路由： 当我们在浏览器中输入http://192.168.1.200:8899/index.html来访问界面的时候，web服务器就会接收到这个请求，然后把index.html解析出来，并找到相应的index.html并展示出来，这就是路由的分发 前端路由 通过改变URL，在不重新请求页面的情况下，更新页面视图。 PS： 后端路由每次访问一个页面都要向浏览器发送请求，然后服务端再响应解析，这个过程就会存在延迟，但是对于前端路径来说只是访问一个新的界面，只是浏览器的路径发生了改变，没有和服务器进行交互(所以不存在延迟) 路由的创建和使用： 在使用Vue路由之前，我们必须要载入Vue-router库 < script src = "https://unpkg.com/vue-router/dist/vue-router.js" > < / script > < div id = "app" > < h1 > Hello App ! < / h1 > < p > < ! -- 通过router - link组件来导航 -- > < ! -- 通过传入 to

绑定Class的语法为 v-bind:class , 可以简写成 :class 绑定Class时,常用 绑定字符串、绑定对象,绑定数组，只有绑定对象时候，css的class引号可以省略 通常我们绑定Class时,可能会用到三目运算, 顺带每种绑定方式使用三目运算举例 一、绑定css中的class字符串 语法v-bind:class="‘样式class’", 引号不可以省略 三目运算 语法v-bind:class=" trueOrFalse ? ‘样式class1’:‘样式class2’" < html > < head > < script src = "https://unpkg.com/vue/dist/vue.js" > < / script > < script src = "https://unpkg.com/vue-router/dist/vue-router.js" > < / script > < style > . div { width : 200 px ; height : 200 px ; background - color : burlywood ; } . div1 { border - radius : 20 px ; } . div2 { width : 200 px ; height : 200 px ; background - color :

vue面试题 1.Vue和react的相同与不同 相同点： 都支持服务器端渲染 都有virtual DOM，组件化开发，通过props参数进行父子组件数据的传递，都实现webComponent规范 数据驱动视图 都有支持native的方案，react native，Vue的weex 都有管理状态，react有redux,vue有自己的VueX 不同点： react严格上只针对MVC的view层，Vue则是MVVM模式 virtual DOM不一样，Vue会跟踪每一个组建的依赖关系，不需要重新渲染整个组件树。而对于react而言，每当应用的状态被改变时，全部组件都会重新渲染，所以react中会需要shouldcomponentUpdate这个生命周期函数方法来进行控制 组件写法不一样, React推荐的做法是 JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了,即’all in js’; Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,jd写在同一个文件; .数据绑定: vue实现了数据的双向绑定,react数据流动是单向的 .state对象在react应用中不可变的,需要使用setState方法更新状态; 在vue中,state对象不是必须的,数据由data属性在vue对象中管理； 2

利用webpack解析和打包.vue组件页面 相关知识： vue项目中的每个页面其实都是一个.vue的文件，这种文件，Vue称之为组件页面，必须借助于webpack的vue-loader才能运行，所以必须安装相关的包。 【注意】 从webpack2.0开始，在webpack.config.js中添加babel:{}是不认识的，需要在项目根目录下新建.babelrc文件，内容填写如下： { presets:['es2015'], //这句代码就是为了解决打包.vue文件不报错 plugins:['transform-runtime'] } View Code 好了，接下来看让一个Vue项目跑起来所需要的步骤： 步骤一：需要安装以下几个包 vue：vue.js核心包 vue-loader：.vue文件编译loader vue-template-compiler：.vue模板编译，被vue-loader所依赖 babel-plugin-transform-runtime：es6实时转换成es5语法 安装vue相关的依赖包（--save-dev意思是将包安装到开发环境下） 接着安装vue核心包（--save意思将包安装到运行环境下） 最终package.json文件内容 { "name": "vue", "version": "1.0.0", "description": "",

其原因在于Vue-router在3.1之后把$router.push()方法改为了Promise。所以假如没有回调函数，错误信息就会交给全局的路由错误处理，因此就会报上述的错误。 vue-router先报了一个Uncaught (in promise)的错误(因为push没加回调)，然后再点击路由的时候才会触发NavigationDuplicated的错误(路由出现的错误，全局错误处理打印了出来)。 解决方案： 方案一（简单粗暴）： 固定vue-router版本到3.0.7以下。这个方案没什么说的，就是简单粗暴，没有任何理由。 修改 vue-router 的 push 方法。 方案二（推荐）： 找到路由文件，在 import Router from 'vue-router' 下面后添加如下代码： /** * 修改 vue-router 的push方法 */ const originalPush = Router . prototype . push ; Router . prototype . push = function push ( location , onResolve , onReject ) { if ( onResolve || onReject ) { return originalPush . call ( this , location , onResolve