大家好,我是一叶,今天是七夕,单身狗的我还在这里写踩坑文.在这里还是要祝大家早日脱单(能不能脱单自己心里没个数吗).本篇继续踩坑,在单页面上展示多页的内容,大家的想法是什么,估计大家第一印象会是iframe框,但是iframe的缺点大过优点,在vue中也是放弃使用的.vue中引入了router的观点,从而实现单.多页面的跳转,接下来进入正文. 首先使用vue-cli脚手架搭建项目,不会的小伙伴可以查看往期文章:vue学习[番外篇]vue-cli脚手架的安装,使用vue-cli搭建好项目的话,我们

Vue 多路由文件的合并 1.使用的是ES6 数组的合并方法 let routes = new Set([...routes1, ...homerouters]);2.两个路由文件,导出的实际上就是一个数组 //route.js文件 export default [ { path: "/login", component: (resolve) => require(['../views/login.vue'], resolve)//实现懒加载 }, { path: "/

前端路由 看到这里可能有朋友有疑惑了,前端也有路由吗?这些难道不应该是在后端部分操作的吗?确实是这样,但是现在前后端分离后,加上现在的前端框架的实用性,为的就是均衡前后端的工作量,所以在前端也有了路由,减轻了服务器对这方面的判断,在前端做好路由分发之后,后端就只需要写API接口了,更着重于数据交互,逻辑上的代码编写了 单页面应用 那么,既然有前端路由,每个路由是不是都要单写一个页面呢?不需要的,现在都提倡单页面应用 什么是单页面应用呢 单页面应用,即 single page applicatio

vue父路由默认选中第一个子路由,切换子路由让父路由高亮不会消失 正常默认会有 .router-active-class 识别高亮 达到以上注意: 1. exact 不要加 注意是不要加,exact 属性表示精确匹配,这里不要加 <router-link :to="index" exact>首页</router-link> 2. children: [ { path: '/home/customer', // 子路由前面一定要加上主路由,在切换的时候还是会匹配主

遇到的问题 今天在项目中遇到了一个问题,明明在Router文件夹下的路由js映射文件中,配置好了,如下: // 生日贺卡 { path: 'birthdayRemind', component: load('@/components/app/birthdayRemind/BirthdayRemind')} 然后我是通过进入home页面,点击一个图标,进入到这个生日贺卡页面,路径如下: const tmpConfig = [ { funcName: '生日贺卡', link: '/home/0/w

一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint UI . Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库,它面向企业级的后台应用,能够帮助你快速地搭建网站,极大地减少研发的人力与时间成本. Element,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 官网:http://element.ele

有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种情况都可以用vue router路由来解决. 1,js的引用 <script src="https://cdn.bootcss.com/vue/2.4.0/vue.js"></script> <script src="https://cdn.boot

有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种情况都可以用vue router路由来解决,本文假设读者已经了解vue.js的基本知识,例如模板等 我的做法是先跟着代码敲一遍看到效果,再讲解各个原因 1,引入js文件 <script src="https://cdn.bootcss.com/vue/2.4.0/vue.js">

之前已经写过一篇关于vue权限路由实现方式总结的文章,经过一段时间的踩坑和总结,下面说说目前我认为比较"完美"的一种方案:菜单与路由完全由后端提供. 菜单与路由完全由后端返回 这种方案前文也有提过,现在更加具体的说一说. 很多人喜欢把路由处理成菜单,或者把菜单处理成路由(我之前也是这样做的),最后发现挖的坑越来越深. 应用的菜单可能是两级,可能是三级,甚至是四到五级,而路由一般最多不会超过三级.如果应用的菜单达到五级,而用两级路由就可以就解决的情况下,为了能根据路由生成相应的菜单,有的

vue+element-ui路由配置相关 转自:http://www.cnblogs.com/MonaSong/p/6703804.html vue-router2中说明了,子路由前面可以不加'/',但是在使用element-ui的时候 用了el-menu组件,这个组件的一个属性可以开启router 然后直接使用index属性赋值为路由,这个时候如果router中的路径中没有加'/'会发生跳转错误 图一:注意红色箭头指的地方 图二:使用el-menu组件的index属性直接赋值路由 图三:ele

在嵌套路由中我们经常会遇到父路由向子路由里面传递参数,传递参数有两种方法,通过 query 或者 params index.html <div id="app"> <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div> main.js 同样通过重定向来显示父路由 import Vue from 'vue' import VueRo

在实际项目中我们会碰到多层嵌套的组件组合而成,但是我们如何实现嵌套路由呢?因此我们需要在 VueRouter 的参数中使用 children 配置,这样就可以很好的实现路由嵌套. index.html,只有一个路由出口 <div id="app"> <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div> main.js,路由的重定

在项目中,将vue的单页面应用程序改为了多页面应用程序,因此在某些场景下,需要频繁的切换两个页面,因此考虑使用路由,这样会减少服务器请求. 使用vue-cli(vue脚手架)快速搭建一个项目的模板(webpack-simple),运行起来后,将原来index.html页面挂载点中的内容删除 index.html <div id="app"> <!-- 使用 router-link 组件来导航,通过传入 `to` 属性指定链接. --> <!-- <r

第一部分: vue嵌套路由 嵌套路由是什么? 嵌套路由就是在一个被路由过来的页面下可以继续使用路由,嵌套也就是路由中的路由的意思.  比如在vue中,我们如果不使用嵌套路由,那么只有一个<router-view>,但是如果使用,那么在一个组件中就还有<router-view>,这也就构成了嵌套. 为什么要使用嵌套路由?  就比如在一个页面中, 在页面的上半部分,有三个按钮,而下半部分是根据点击不同的按钮来显示不同的内容,那么我们就可以在这个组件中的下半部分看成是一个嵌套路由,也就是

1.前端路由 后端路由:多页面,服务器端渲染好返回给浏览器. 前端路由:改变url不向服务器发送请求:前端可以监听url变化:前端可以解析url并执行相应操作. 前后端分离:后端只提供API来返回数据,前端通过ajax获取数据后,在通过一定的方式渲染到页面上. SPA:前后端分离+前端路由. SPA只有一个html文件,整个网站的所有内容都在这一个html里,通过js来处理. 2.vue-router 路由不同的页面实时上就是加载不同的组件. 3.示例 github地址:https://gith

第一部分: vue嵌套路由 嵌套路由是什么? 嵌套路由就是在一个被路由过来的页面下可以继续使用路由,嵌套也就是路由中的路由的意思. 比如在vue中,我们如果不使用嵌套路由,那么只有一个<router-view>,但是如果使用,那么在一个组件中就还有<router-view>,这也就构成了嵌套. 为什么要使用嵌套路由? 就比如在一个页面中, 在页面的上半部分,有三个按钮,而下半部分是根据点击不同的按钮来显示不同的内容,那么我们就可以在这个组件中的下半部分看成是一个嵌套路由,也就是说在

vue的路由设置小结 // 异步路由的编写示例.其中针对component字段进行懒加载及分块处理,提升首屏加载速度的同时,也可以手动控制让某些页面合并到一个单独的js文件中,而不是每个页面都是一个js. //完整解释请参考官方文档:vue-router懒加载 https://router.vuejs.org/zh-cn/advanced/lazy-loading.html // const asyncRouter = [ // { // path: '/asyncRouter', // com

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>VueRouter</title> <script src="js/vue.js"></script> <script type="text/javascript" src="js

路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容.Home按钮 => home 内容, about按钮 => about 内容,也可以说是一种映射. 所以在页面上有两个部分,一个是点击部分,一个是点击之后,显示内容的部分.点击之后,怎么做到正确的对应,比如,我点击home 按钮,页面中怎么就正好能显示home的内容.这就要在js 文件中配置路由. 路由中有三个基本的概念 route, ro

VUE:路由 一.说明 1)官方提供的用来实现SPA的vue插件 2)github:https://github.com/vuejs/vue-router 3)中文文档:http://router.vuejs.org/zh-cn/ 4)下载:npm install vue-router --save 二.相关API 1)VueRouter():用于创建路由器的构建函数 new VueRouter{{ //多个配置项 }} 2)路由配置: routes:[ {//一般路由 path:'/about

前言 本章是为了以后实现前端页面的搭建而写的, 重点在于如何实现 单页Web应用 因为相对于以前的传统多页面web,有很大的缺陷. 那么就必须了解一下Vue的路由设置. SPA的概念 总的而言,我们知道之前的话都是用的是许多jsp,或html页面来组成我们的项目的. 那么这样有什么缺点呢? 每次请求返回的体积太大,加大了服务器的压力 页面较大的话,会影响页面的加载速度. 不能提供给用户良好的体验 所以,在以上的缺点的问题在SPA都能解决 SPA(single page application,S