SPA应用最终只有一个HTML文件,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 数组的一个方法

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 ...

借助 Vue 来构建单页面应用

原文: https://github.com/MeCKodo/vue-tutorial 主题 Vue.js (1/2)Vue构建单页应用最佳实战 前言 我们将会选择使用一些vue周边的库 1.使用no ...

使用Angular构建单页面应用(SPA)

什么是SPA?看下图就是SPA: 下面说正经的,个人理解SPA就是整个应用只有一个页面,所有的交互都在一个页面完成,不需要在页面之间跳转. 单页面的好处是更快的响应速度,更流畅的用户体验,甚至和桌面应 ...

day 100天 VUE 父子传值,单页面.

一 .静态资源导入方法 启动服务  npm run serve

{{msg}}& ...

spring boot使用vue+vue-router构建单页面应用

spring boot http://docs.spring.io/spring-boot/docs/current-SNAPSHOT/reference/htmlsingle/ vue https: ...

vue Router——进阶篇

vue Router--基础篇 1.导航守卫 正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的 ...

单页面应用SPA架构

个人认为单页面应用的优势相当明显: 前后端职责分离,架构清晰:前端进行交互逻辑,后端负责数据处理. 前后端单独开发.单独测试. 良好的交互体验,前端进行的是局部渲染.避免了不必要的跳转和重复渲染. 当 ...

随机推荐

Odoo 二次开发教程(三)-第一个Model及Form、Tree视图

创建完我们的模块,接下来我们就要为我们的模块添加一些对象.今天我们将要创建一个学生对象(tech.student)和一些基本的属性,并将用form和tree视图将其展示出来: 一. 创建tech.st ...

LeetCode 26 Remove Duplicates from Sorted Array

Problem: Given a sorted array, remove the duplicates in place such that each element appear only onc ...

GNU Makefile编写

[Introduction] make 是程序员很好用的工具,如果存在makefile存在,每次更新代码,执行shell命令 shell 就可以执行所有需要编译的文件,make是根据你编写的Makef ...

字符串匹配算法——KMP算法

处理字符串的过程中,难免会遇到字符匹配的问题.常用的字符匹配方法 1. 朴素模式匹配算法(Brute-Force算法) 求子串位置的定位函数Index( S, T, pos). 模式匹配:子串的定位操 ...

linux rpm 安装包 信息查询

来源:http://blog.csdn.net/namesliu/article/details/6004388 以CentOS5.5 中已经集成安装了 Apache.MySQL.PHP作为样例,我们 ...

iOS之Sqlite和FMDB

在iOS 开发中,总会用到数据库的操作,来实现增.删.改.查. 尤其是查询. 一旦涉及到查询的操作,那就非得用数据库不可了.   SQLite (http://www.sqlite.org/docs. ...

Android webview 应用

现在在android把一个网站打包成apk 是很简单的事,不懂一点代码的都可以去百度生成一个apk,app.当然样式就不是你所能控制的. 今天我就介绍一下 android 的 webview 在And ...

使用 QDockWidget嵌套布局来实现复杂界面，方便用户可以自定义界面，自由组合窗口

http://www.cnblogs.com/findumars/p/5436533.html

Oracle：select into 查询没有记录的解决办法

在数据库编程中,select into 语句可以将数据库的某些值赋值给程序的变量,使用起来非常方便.但很多时候也会遇到查询出来没有记录的情况,这时程序会出错. 可以使用 exception when ...

【代码笔记】Web-CSS-CSS Float(浮动)

一, 效果图. 二,代码.

...