vue-router

一、概述 vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建 单页面应用 。 vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。 而传统的多页面应用 ，是用一些超链接来实现页面切换和跳转的。 在vue-router单页面应用中 ，则是路径之间的切换，也就是组件的切换。 路由中有三个基本的概念 route, routes, router。 1. route，它是一条路由，由这个英文单词也可以看出来，它是单数， Home按钮 => home内容， 这是一条route, about按钮 => about 内容， 这是另一条路由。 2. routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， { about按钮 => about 内容}] 3. router 是一个机制，相当于一个管理者，它来管理路由。因为routes 只是定义了一组路由，它放在哪里是静止的，当真正来了请求，怎么办？ 就是当用户点击home 按钮的时候，怎么办？ 这时router 就起作用了，它到routes 中去查找，去找到对应的 home 内容，所以页面中就显示了 home 内容。 4. 客户端中的路由，实际上就是dom 元素的显示和隐藏。当页面中显示home 内容的时候，about

vue中页面跳墙处理 页面跳墙中使用 vue-router 中的 beforeEach 的死循环问题 问题展现 import Router from 'vue-router' const router = new Router({ {path: '/', component: index }, {path: '/login', component: login}, {path: '/error', component: error}, {path: '*', component: error} }) router.beforeEach((to, from, next) => { const isLogin = sessionStorage.getItem('loginData') if (isLogin) { next() } else { next('/error') } }) 最近在使用时，一直陷入死循环，当时的想法是如何将路由提取出来，脱离 beforeEach 的控制，之后发现不可行。上面问题再现，会出现死循环，因为 /error 会在进入前 又要进入 beforeEach 中 ，这样就会一直循环下去 所以就是想如何跳出这个循环即可 router.beforeEach((to, from, next) => { const isLogin = sessionStorage

在理解beforeEach无限循环之前，我们先来看一下beforeEach相关的知识点，该篇文章的项目是基于 express+vue+mongodb+session 实现注册登录 这篇文章项目基础之上进行讲解的，因为登录完成后，会跳转到列表页面，那么在跳转到列表页面之前，我们会使用 router.js 使用beforeEach来判断下，如果登录成功，并且session在有效期内的话，就跳转到下一个页面去，否则的话，就重定向到登录页面去。 app/index/router.js 代码如下： import Vue from 'vue'; import VueRouter from 'vue-router'; // 告诉 vue 使用 vueRouter Vue.use(VueRouter); const routes = [ { path: '/list', name: 'list', component: resolve => require(['./views/list'], resolve) }, { path: '*', // 其他没有的页面都重定向到 home页面去 redirect: '/login' }, { path: '/login', name: 'login', component: resolve => require(['./views/login'],

第一章：认识Vue 1.1-Vue概述 Vue是什么 ：Vue是一个渐进式的JavaScript框架。 渐进式开发 ：声明式渲染→组件系统→客户端路由→集中状态管理→项目构建 声明式渲染：Vue最简单的用法。 组件系统：通用的开发方式。 客户端路由：单页面应用开发。 集中状态管理：业务较为复杂的项目开发。 项目构建：前端项目独立开发、测试、部署上线。 Vue的优点 ： 易用：有HTML、CSS、JavaScript基础就可以快速上手Vue。 灵活：在一个库和一套完整框架之间伸缩自如。 高效：20kb运行大小，超快虚拟DOM。 Vue官网 ： https://cn.vuejs.org 1.2-快速入门 代码-HelloWorld 【入门步骤】 页面定义一个呈现数据的容器（如div） 引入vue.js库文件 创建Vue对象 在Vue中定义数据并绑定到div中 <!-- 页面定义一个呈现数据的标签（如div） --> <div id="app"> {{msg}} </div> <!-- 引入vue.js库文件 --> <script src="lib/vue.js"></script> <script> // 创建Vue对象 new Vue({ el:"#app", // 呈现数据的容器 data:{ // 数据 msg:"Hello World!" } }); </script>

欢迎大家关注 腾讯云技术社区-博客园官方主页 ，我们将持续在博客园为大家推荐技术精品文章哦~ 李萌，16年毕业，Web前端开发从业者，目前就职于腾讯，喜欢node.js、vue.js等技术，热爱新技术，热爱编程。 vue.js 的文档对于动画的使用做了很多的介绍，不熟悉的小伙伴可以先 了解一下 。 下面就进入正题啦！ 第一个动画示例： 这其实是一个很常见的弹出层效果，鼠标点击按钮切换弹出层的显示，点击其他区域弹出层消失，用javascript绑定事件可能几行代码就搞定了，但是 vue.js 的状态驱动模式和javascript的事件驱动模式是不同的，下面是使用 vue.js 的实现方式： 鼠标点击button会切换一个布尔值show，用show来控制弹出层的显示，而包裹着 <transition> 标签的弹出层在show的状态改变时就会触发动画，下面就可以用css3写一个弹出层的动画： 关于不同的过渡状态对应的css声明，官网上是这样解释的： v-enter : 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。 v-enter-active : 定义进入过渡的结束状态。在元素被插入时生效，在 transition/animation 完成之后移除。 v-leave : 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。 v-leave-active :

一、打包vue项目 　　在开发完的vue项目输入如下命名，打包生成dist文件夹 yarn build / npm run build 　　此时根目录会多出一个文件夹：dist文件夹，里面就是我们要发布的东西。 　　如果将该dist目录整个传到服务器上，部署成静态资源站点就能直接访问到该项目。 二、获取nginx 镜像 　　 nginx 是一个高性能的HTTP和反向代理服务器，此处我们选用 nginx 镜像作为基础来构建我们的vue应用镜像。 　　在终端输入： docker pull nginx 　　即可以获取到nginx镜像。 　　Docker镜像是一个特殊的文件系统，除了提供容器运行时所需的程序、库、资源、配置等文件外，还包含了一些为运行时准备的一些配置参数（如匿名卷、环境变量、用户等）。 镜像不包含任何动态数据，其内容在构建之后也不会被改变。 　 在终端输入如下命令，可以看到nginx的镜像 docker image ls 　　镜像结果如下所示： 三、创建 nginx config配置文件 　　在项目根目录下创建 nginx 文件夹，该文件夹下新建文件 default.conf server { listen 80 ; server_name localhost; #charset koi8 - r; access_log /var/log/nginx/ host