vue路由

安装运行环境（node和npm） 安装vue-cli（查看是否安装成功vue -V） 安装webpack 新建项目 1、vue init webpack 项目名称 2、配置项目有关的信息（项目名称，开发者，描述，安装路由，使用eslint代码规范，测试单元） 3、下载依赖模块后会出现启动项目的提示命令 4、进入项目的文件夹下，，使用npm run dev来运行项目 5、运行完成后根据提示的地址进行项目的访问 6、到此项目就创建完成了，以上是页面中显示的内容 8、主要修改的是src中的文件 Assets中存放静态资源 Components中存放当前项目中用到的组件 Router中存放涉及的路由配置 App.vue当前项目的主页面组件 Main.js当前项目的vue实例创建，可以将实例的配置信息放在当前文件中 9、组件的文件中主要包含三个部分，template、script、style Template标签中放html结构（必须有且只有一个跟标签） Script中存放当前组件的数据、生命周期函数、计算属性、侦听器、方法等 Style中放样式，使用scoped可以使样式只作用于当前组件 10、路由的配置，使用path、name、component来只能路由对应的地址，名称和指定的组件，嵌套路由通过child中配置下级路由来实现，child的值是数组 来源： https://www

0. 服务端渲染简介 服务端渲染不是一个新的技术；在 Web 最初的时候，页面就是通过服务端渲染来返回的，用 PHP 来说，通常是使用 Smarty 等模板写模板文件，然后 PHP 服务端框架将数据和模板渲染为页面返回，这样的服务端渲染有个缺点就是一旦要查看新的页面，就需要请求服务端，刷新页面。 但如今的前端，为了追求一些体验上的优化，通常整个渲染在浏览器端使用 JS 来完成，配合 history.pushState 等方式来做单页应用（SPA: Single-Page Application），也收到不错的效果，但是这样还是有一些缺点：第一次加载过慢，用户需要等待较长时间来等待浏览器端渲染完成；对搜索引擎爬虫等不友好。这时候就出现了类似于 React，Vue 2.0 等前端框架来做服务端渲染。 使用这些框架来做服务端渲染的兼顾了上面的几个优点，而且写一份代码就可以跑在服务端和浏览器端。Vue 2.0 发布了也有一段时间了，新版本比较大的更新就是支持服务端渲染，最近有空折腾了下 Vue 的服务端渲染，记录下来。 1. 在 Vue 2.0 中使用服务端渲染 官方文档给了一个简单的例子来做服务端渲染： // 步骤 1:创建一个Vue实例 var Vue = require('vue') var app = new Vue({ render: function (h) { return

什么是路由： 后端路由: 对于普通的网站，所有的超链接都是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

简单记录一下需求处理，当项目中的除了登录页或其它一两个页面不需要用户登录数据，其它页面均需要登录信息才能正常展示，那么就要做路由全局守卫了， 回调函数中的参数，to：进入到哪个路由去，from：从哪个路由离开，next：函数，决定是否展示你要看到的路由页面。 如下例：main.js中设置全局守卫 在main.js中，有一个路由实例化对象router。在main.js中设置守卫就是全局守卫。 如下，判断to.path当前将要进入的路径是否为登录或注册，如果是就执行next()，展示当前界面。如果不是，就弹出alert，然后移至登录界面。 这样就可实现，用户在未登录状态下，展示的一直是登录界面。 2.顺便记一下其它钩子导航守卫 全局后置钩子router.afterEach((to,from)=>{}) 只有两个参数，to：进入到哪个路由去，from：从哪个路由离。 如下，每次切换路由时，都会弹出alert，点击确定后，展示当前页面。 router.afterEach((to,from)=>{ alert("after each"); }) 5. 判断store.gettes.isLogin === false 是否登录 二.组件内的守卫 1. 到达这个组件时，beforeRouteEnter:(to,from,next)=>{} 在Admin.vue文件中，点击转到admin路由时

总结 搭建项目 第一类是脚手架搭建 vue-cli脚手架的环境 node vue-cli 下载nodejs安装到本地 全局安装vue-cli cli安装命令 npm install -g @vue/cli 创建项目 vue create 项目名称 可以选择两种方式 第一中默认方式（不推荐） 第二种 自定义方法 选择history模式（大部分情况选择no） 其他自定义选项使用 上下键选择 空格键可以选中或取消选中 vue-cli2 的项目搭建命令 cli 安装命令 npm install vue-cli -g 创建项目的命令 vue init webpack 项目名称 第二种 webpack搭建项目 两个重要的依赖 第一个 vue-loader 第二个 vue-template-compiler 生命周期 berforeCreate() 这个是dom创建之前触发的函数 这时候还没有data和methods 所以无法调用data中的数据和methods里面的方法 created() dom创建的函数 里面不能直接获取dom 如果要在created()中获取dom 需要使用this.$nextTick() $nextTick是在dom更新完成后调用的方法 他是基于promise的一个方法 会有延迟 beforeMounte() dom 创建完成 但是还未渲染 mounted()

最近做一些CI+Vue开发的简单项目，由于刚开始一直从事后端，对Vue了解不是很多，fork了团队的项目代码发现项目的文件夹很多，一时间有些懵，上网上参考了部分资料，博客园中的 放晴的天空 与 狮子爱吃草 两位的博客提供了很大的帮助，现将该部分知识做以下总结。 下图为Vue项目文件夹： 以下就项目文件夹中的各文件的作用进行介绍： ├── build/ # Webpack 配置目录 ├── dist/ # build 生成的生产环境下的项目 ├── config/ # Vue基本配置文件，可以设置监听端口，打包输出等 ├── node_modules/ # 依赖包，通常执行npm i会生成 ├── src/ # 源码目录（开发的项目文件都在此文件中写） │ ├── assets/ # 放置需要经由 Webpack 处理的静态文件，通常为样式类文件，如css，sass以及一些外部的js │ ├── components/ # 公共组件 │ ├── filters/ # 过滤器 │ ├── store/ 　　　　 # 状态管理 │ ├── routes/ # 路由，此处配置项目路由 │ ├── services/ # 服务（统一管理 XHR 请求） │ ├── utils/ # 工具类 │ ├── views/ # 路由页面组件 │ ├── App.vue # 根组件 │ ├──

mode:路由的形式 用的哪种路由 1、hash 路由 会带#号的哈希值 默认是hash路由 2、history路由 不会带#的 单页面开发首屏加载慢怎么解决？单页面开发首屏加载白屏怎么解决？ 1、路由的懒加载 异步组件 (resolve)=>require(["组件的路径"],resolve); ES6的import ()=>import("组件的路径"); 2、ssr渲染 服务端渲染 nuxt 路由常用的配置项 path:路由请求的路径 component:路径匹配成功后需要渲染的组件或者页面 redirect:重定向 children:路由嵌套 name:命名路由 给当前路由取一个别名 props:路由解耦 路由传参的一种方式 针对动态路由 meta:路由元信息 当前路由所携带的一些信息 路由跳转的方式： 1、<a href="#/home"></a> 2、<router-link to="/home"></router-link> to的路径会与path进行匹配，如果匹配成功会渲染component对应的组件 组件怎样才能在页面上进行展示 必须依赖一个内置组件 <router-view></router-view> 展示路径匹配成功以后相对应的组件 3、编程式导航 路由嵌套 children是一个数组 数组里面存放对象 每一个对象都是下一级的路由的配置项

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

router-link 普通路由、指向path地址 <router-link to:"/xxx"></router-link> 命名路由 1、在路由配置routes[]中增加name属性 2、在router-link中 绑定属性 :to="{name:‘xxx’}" <router-link to="{name:'xxx'}"></router-link> router-link router-view 是在安装插件Vue.use()时产生的内置组件 简单demo < ! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < meta http - equiv = "X-UA-Compatible" content = "ie=edge" > < title > Document < / title > < script src = '../node_modules/vue/dist/vue.js' > < / script > < ! -- 1 、引入vue - router -- > < script src = "vue

利用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": "",