vue-router

VUE 1.什么是 vue 生命周期 2.vue生命周期的作用是什么 3.第一次页面加载会触发哪几个钩子 4.简述每个周期具体适合哪些场景 5.created和mounted的区别 6.vue获取数据在哪个周期函数 7.请详细说下你对vue生命周期的理解？ vue路由面试题 mvvm 框架是什么？ vue-router 是什么?它有哪些组件 active-class 是哪个组件的属性？ 怎么定义 vue-router 的动态路由? 怎么获取传过来的值 vue-router 有哪几种导航钩子? 6.$route 和 $router 的区别 7.vue-router响应路由参数的变化 8.vue-router传参 9.vue-router的两种模式 10.vue-router实现路由懒加载（ 动态加载路由 ） vue常见面试题 1.vue优点 2.vue父组件向子组件传递数据？ 3.子组件像父组件传递事件 4.v-show和v-if指令的共同点和不同点 5.如何让CSS只在当前组件中起作用 6.<keep-alive></keep-alive>的作用是什么? 7.如何获取dom 8.说出几种vue当中的指令和它的用法？ 9. vue-loader是什么？使用它的用途有哪些？ 10.为什么使用key 11.axios及安装 12.axios解决跨域 13.v-modal的使用 14

1.什么是路由? 在Web开发过程中，经常会遇到『路由』的概念。那么，到底什么是路由？简单来说， 路由就是URL到函数的映射。 路由的概念最开始是由后端提出来的，在以前用模板引擎开发页面的时候，是使用路由返回不同的页面， 大致流程可以看成这样： （1）浏览器发出请求 （2）服务器端监听到80端口或者443有请求过来，并解析url路径 （3）根据服务器的路由配置，返回相应信息（可以是html文件，json数据，也可以是图片） （4）浏览器根据数据包的content-type来决定如何解析数据 简单来说 路由就是用来跟后端服务器进行交互的一种方式 ，通过不同的路径来请求不同的资源，请求不同的页面是路由的其中一项功能。 2.router 和 route 的区别 route就是一条路由，它将一个URL路径和一个函数进行映射 ，例如： /users -> getAllUsers() /users/count -> getUsersCount() 这就是两条路由，当访问 /users 的时候，会执行 getAllUsers() 函数；当访问 /users/count 的时候，会执行 getUsersCount() 函数。 而 router 可以理解为一个容器，或者说一种机制，它管理了一组 route 。简单来说，route 只是进行了URL和函数的映射，而在当接收到一个URL之后，

一、vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档： 单文件组件 二、webpack加载第三方包 ①项目中，如果需要用到一些第三方包，比如 vue.js ， jQuery.js ， bootstrap.js 等等，如果使用一般的方法，直接 import 加载使用，然后打包成一个 bubdle.js 文件的话，因为第三方包的体积过大，最终会造成 bundle.js 的文件过大，所以一般不打包第三方包，而是通过script标签的方式把第三方资源引入到页面（单纯的引入是报错或者没有效果的），还需要通过以下配置，这里以jQuery为例 ②下载第三方包，默认是安装在 node_modules 文件夹下 npm install jquery ③在index.html页面中引入资源（这里只是在测试阶段需要这样，实际项目上线的时候，src里的文件会在根目录里，node_modules通过安装生产环境依赖的目录也是在根目录里，或者可以使用配置虚拟内存，把之前 webpack-dev-server 的配置 contentBase 里的路径直接改为 ./ ，这样就会在根目录开启一个虚拟的内存运行打包后的index.html，所以最终这里还是得 src="node_modules...." 这样写） <!-- 注意

本教程是作者自己在学习Laravel和Vue时的一些总结，有问题欢迎指正。 Laravel是PHP的一个框架，Vue是前端页面的框架，这两个框架如何结合起来构建一个SPA（Single Page Application）呢？流程大致分为下面三步： 页面请求Laravel的一个路由 路由返回渲染一个包含了Vue的SPA框架 在上面渲染出来的框架中使用Vue来加载不同的页面单元模块 主要会学习使用到三个东西： laravel vue.js Vue-router axios 上面是一个简单的流程图，从图中我们可以看到，当请求 3 和 4 的路由时，并不会再次请求后端的Laravel，而是前端渲染了。 说了这么多，我们开始写代码吧～ 1. 安装 composer create-project --prefer-dist laravel/laravel laravel-spa "5.6.*" cd laravel-spa npm install npm install vue-router 安装好 laravel 和 vue-router 后，我们需要配置前端路由和路由对应的组件 2. 配置Vue Router 在 Vue Router 中把 route 和vue组件做了一个映射，在渲染时会把不同的组件渲染到 <router-view></router-view> 标签中。 首先，我们修改

1全局安装vue-cli 输入命令：npm install vue-cli -g 2创建项目框架 输入命令：vue init webpack vueapi 3依次按照提示输入，项目名、项目描述、项目作者等等， 4.进入vueapi目录 输入命令： cd vueapi 5.安装element-ui 输入命令：npm i element-ui -S 因为是基于Vue.js和elementUI进行的项目开发，所以当然要导入Vue.j包和elementUI包： npm install --save vue element-ui 6.安装vue-router 要进行页面跳转，所以要用到vue-router： 输入命令：npm install --save vue-router 7.安装axios 要从后端获取数据，所以要ajax请求，用vue官方推荐的axios： 输入命令：npm install --save axios 启动项目 输入：npm run dev 构建vue项目目录大致如下： buid：构建脚本目录 config：构建配置目录 node_modules：依赖node工具包目录 src：源码目录 assets：资源目录 components：组件目录 router： App.vue 页面vue组件 main.js：页面入口js文件 static ：静态文件目录 test

　　我们通常所说的单页面应用程序通常通过前端框架（angular、 react 、 vue ）进行开发， 单页面应用程序 将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成了，SPA不会因为用户的操作而进行页面的重新加载或跳转。取而代之的是利用 JavaScript 动态的变换HTML的内容，从而实现UI与用户的交互。由于避免了页面的重新加载，SPA 可以提供较为流畅的用户体验。 一、优点 1.良好的交互体验 　　单页应用的内容的改变不需要重新加载整个页面，获取数据也是通过Ajax异步获取，没有页面之间的切换，就不会出现“白屏现象”,也不会出现假死并有“闪烁”现象，页面显示流畅，web应用更具响应性和更令人着迷。 2.良好的前后端工作分离模式 　　后端不再负责模板渲染、输出页面工作，后端API通用化，即同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端。 3.减轻服务器压力 　　单页应用相对服务器压力小，服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍。 二、缺点 1.首屏加载慢 如果不对路由进行处理，在加载首页的时候，就会将所有组件全部加载，并向服务器请求数据，这必将拖慢加载速度； 通过查看Network，发现整个网站加载试讲长达10几秒

菜单快捷导航： vue项目创建 vue路由router知识点(路径参数、查询参数、命名路由、嵌套路由、命名视图、hash/history模式 ) vue导航守卫（全局守卫、单个路由独享、组件级守卫） 1、创建一个vue项目步骤 （windows环境下）。创建vue项目前，检查系统是否具备创建项目的条件（是否已经安装好了node.js、webpack、vue-cli）。cmd打开终端。 1.1 如果还没安装node.js， 则先安装 node.js ，安装完成后，查看node版本 node -v 1.2 安装淘宝镜像， 安装完成后查看npm版本：npm -v npm install -g cnpm --registry=https: // registry.npm.taobao.org 1.3 安装webpack npm install webpack -g 1.4 安装vue全局脚手架，vue-cli2.x使用 npm install -g vue-cli ， vue-cli3.x使用 npm install -g @vue/cli 安装， 查看vue版本： vue -V npm install -g vue-cli 　　或 npm install -g @vue/cli 1.5 准备工作做好了，开始正式创建vue项目 ， 创建vue项目可以选择两种方式。下面的my_vue

当我们在写单页应用的时候，前端路由采用vue-router实现，如果从页面A跳到页面B，然后点浏览器返回，返回到页面A时，页面会刷新。最近遇到一个需求，一个列表页，用户会根据条件进行筛选，也可以翻页，当用户筛选后点击具体的某一个条目时，进入详情页查看编辑详情，用户点击返回时，希望之前页面的筛选条件也能够保留。查找相关资料，vue中有个keep-alive组件可以对组件进行缓存，这样当页面返回时就不会刷新页面。 <keep-alive> <router-view></router-view> </keep-alive> 但是直接keep-alive是强缓存，如果在详情页对于该内容做了修改，希望在列表页的描述中能够体现出来，这个时候希望可以动态的控制页面的缓存与否，这个时候结合vue-router去实现，这时候需要对页面的一些写法进行改造，具体实现步骤： 1、页面路由的写法，其中$route.meta.keepAlive=true则页面路由放置在keep-alive组件中，表示需要缓存，否则不缓存，这里就可以通过控制meta中的keepAlive属性来控制router-view中的页面需不需要缓存了。 <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router

前言：保存路由跳转前的状态这种应用场景还是很常遇到的，比如进行商品筛选，筛选出一些后，点击路由跳转到某个商品的详情页，然后返回页面时，我想让之前的页面能展示之前筛选出来的商品。 一、代码实现 <!-- App.vue根组件代码 --> <template> <div class="app"> <div class="slide"> <ul> <li><router-link to="/page1" >page1</router-link></li> <li><router-link to="/page2" >page2</router-link></li> </ul> </div> <div class="content"> <keep-alive> <router-view></router-view> </keep-alive> </div> </div> </template> //路由配置页面代码 import Vue from 'vue' import Router from 'vue-router' import Page1 from '@/page/Page1' import Page2 from '@/page/Page2' Vue.use(Router) export default new Router({ routes: [ {path: '/page1',

前情提要: 　　通过vue 搭建路飞学城记录 　　　　一:项目分析 　　　　　 　　　　二:项目搭建 　　　　　　1:创建项目　　　 　　　　　　　　　　vue init webpack luffy 　　　　　　2:初始化项目 　　　　　　　　　　清除默认的HelloWorld.vue组件和APP.vue中的默认模板代码和默认样式　 　　　　　　　　2>1: 清除位置 　　　　　　　　　　 　　　　　　　2>2:修改后效果 　　　　　　　　 　　　　　　　　　　　　 2>3:结果图 　　　　　　　　　　 　　　　　三:引入ElementUI 　　　　　　1:快速安装ElementUI 　　　　　　　　 对于前端页面布局，我们可以使用一些开源的UI框架来配合开发，Vue开发前端项目中，比较常用的就是ElementUI了。 ElementUI是饿了么团队开发的一个UI组件框架，这个框架提前帮我们提供了很多已经写好的通用模块，我们可以在Vue项目中引入来使用，这个框架的使用类似于我们前面学习的bootstrap框架，也就是说，我们完全可以把官方文档中的组件代码拿来就用，有定制性的内容，可以直接通过样式进行覆盖修改就可以了。 中文官网： http://element-cn.eleme.io/#/zh-CN 文档快速入门： http://element-cn.eleme.io/#/zh-CN