Vue(6)- Vue-router进阶、单页面应用(SPA)带来的问题
一、Vue-router进阶
回顾学过的vue-router,并参考官方文档学习嵌套路由等路由相关知识。
二、单页面应用(SPA)带来的问题
1、虽然单页面应用有优点,但是,如果后端不做服务器渲染(https://ssr.vuejs.org/),基于vue实现的单页面应用是不能爬取到数据的,而且对SEO(搜索引擎优化)不友好。
可通过审查元素的Sources来查看vue实现的网站是否做了服务器渲染。
下图是vue官网的效果,可见做了服务器渲染:

下图是路飞学城官网的效果,可见并没有做服务器渲染:

对于单页面应用,为了SEO(搜索引擎优化),或者为了爬虫,就需要做服务器渲染,但是vue不支持django做服务器渲染,因为与vue不共用一套代码(全家桶vue+vue-router+vuex),而node.js是在JavaScript基础上封装的一套后端代码,所以node.js中能写js,即vue和node.js是可以共用一套代码,可以搭建一个node.js服务器,来做服务器渲染。
三、其他
1、模块化开发中的平行组件传值
在main.js中创建bus实例,挂载到原型,如下:
let bus = new Vue();
Vue.prototype.$bus = bus;
2、each和foreach
$.each()是jquery的方法,可以循环数组和对象;
forEach()是javascript数组的一个方法;
Vue(6)- Vue-router进阶、单页面应用(SPA)带来的问题的更多相关文章
- 基于laravel5.4 vue 和vue-element搭建的单页面后台CMS
		介绍 该项目后台是基于vue和laravel搭建的单页面CMS系统,包含了文章管理,权限管理,用户管理等基本模块. 前台使用了传统web技术,laravel渲染搭建了个博客系统 github地址:ht ... 
- PushState+Ajax实现简单的单页面应用SPA
		http://www.helloweba.com/view-blog-386.html 单页面应用(Single Page Application)简称SPA,使用SPA构建的应用优点有用户体验好.速 ... 
- (转)前端:将网站打造成单页面应用SPA
		前端:将网站打造成单页面应用SPA(一) Coffce 680 6月19日 发布 推荐 6 推荐 收藏 85 收藏,3.1k 浏览 前言 不知你有没有发现,像Github.百度.微博等这些大站,已经不 ... 
- 前端:将网站打造成单页面应用SPA
		前端:将网站打造成单页面应用SPA 前言 不知你有没有发现,像Github.百度.微博等这些大站,已经不再使用普通的a标签做跳转了.他们大多使用Ajax请求替代了a标签的默认跳转,然后使用HTML ... 
- webpack配合vue.js实现完整的单页面demo
		本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用,因为需要用到node的npm,所以确保安装了node,建议官网安装最新的稳定版本.并且在项目中需要加载一些npm包,由于npm的 ... 
- Vue项目中设置每个单页面的标题
		两种实现方法,第一种方法引入插件,第二种为编程方式实现(推荐) 首先在路由文件index.js中给每个单页面路由添加title routes: [{ path: '/', name: ... 
- Vue - 使用命令行搭建单页面应用
		使用命令行搭建单页面应用 我们来看一下最后完成的效果: 大纲 1. 下载 node, git, npm 2. 使用命令行安装一个项目 一. 下载工具 node , git 的下载大家可以去官网自行下 ... 
- 052——VUE中使用vue-cli初始化单页面应用
		<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ... 
- 使用Angular构建单页面应用(SPA)
		什么是SPA?看下图就是SPA: 下面说正经的,个人理解SPA就是整个应用只有一个页面,所有的交互都在一个页面完成,不需要在页面之间跳转. 单页面的好处是更快的响应速度,更流畅的用户体验,甚至和桌面应 ... 
- 单页面应用SPA架构
		个人认为单页面应用的优势相当明显: 前后端职责分离,架构清晰:前端进行交互逻辑,后端负责数据处理. 前后端单独开发.单独测试. 良好的交互体验,前端进行的是局部渲染.避免了不必要的跳转和重复渲染. 当 ... 
随机推荐
- Java对象的浅克隆和深克隆
			为什么需要克隆 在实际编程过程中,我们常常要遇到这种情况:有一个对象A,在某一时刻A中已经包含了一些有效值,此时可能会需要一个和A完全相同新对象B, 并且此后对B任何改动都不会影响到A中的值 ... 
- Quotations中页面弹出的问题
- libubox-runqueue
			参考:libubox [4] - uloop runqueue ustream 任务队列是通过uloop定时器实现,把定时器超时时间设置为1,通过uloop事件循环来处理定时器就会处理任务队列中的ta ... 
- python通过日志分析加入黑名单
			监控nginx日志,若有人攻击,则加入黑名单,操作步骤如下:1.读取日志文件2.分隔文件,取出ip3.将取出的ip放入list,然后判读ip的次数4.若超过设定的次数,则加入黑名单 日志信息如下: 1 ... 
- 图像处理之拼接---图像拼接opencv
			基于SURF特征的图像与视频拼接技术的研究和实现(一) 一直有计划研究实时图像拼接,但是直到最近拜读西电2013年张亚娟的<基于SURF特征的图像与视频拼接技术的研究和实现>,条 ... 
- C++学习之拷贝构造函数篇
			一.拷贝构造函数的声明 Array(const Array & arr); 二.拷贝构造函数的实现分为两种,即是深拷贝和浅拷贝. 1.浅拷贝 代码例如以下: class Array { pub ... 
- 对Linux命令进一步学习
			root@wuheng-virtual-machine:/home/wuheng# ls -ltotal 44drwxr-xr-x 2 wuheng wuheng 4096 Mar 3 01:30 ... 
- html herf onclick
			html中a标签中的onclick和href的使用 onclick 链接的 onclick 事件被先执行,其次是 href 属性下的动作(页面跳转,或 javascript 伪链接): 假设链接中同时 ... 
- db2 reorg pending
			通常在数据库上线之前,我们都会对数据库做周密的规划,无论在测试阶段还是上线之初,也难免由于需求的更改会对数据中的表做一些更改.而某些alter table语句则会导致该表处于reorg-pending ... 
- 蓝桥杯 第四届C/C++预赛真题(5) 前缀判断(水题)
			题目标题:前缀判断 如下的代码判断 needle_start指向的串是否为haystack_start指向的串的前缀,如不是,则返回NULL. 比如:"abcd1234" 就包含了 ... 
