Vue --6 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;
Vue --6 router进阶、单页面应用(SPA)带来的问题的更多相关文章
- 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 cli 脚手架搭建单页面 Vue 应用(进阶2)
1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 ...
- 使用Angular构建单页面应用(SPA)
什么是SPA?看下图就是SPA: 下面说正经的,个人理解SPA就是整个应用只有一个页面,所有的交互都在一个页面完成,不需要在页面之间跳转. 单页面的好处是更快的响应速度,更流畅的用户体验,甚至和桌面应 ...
- 单页面应用SPA架构
个人认为单页面应用的优势相当明显: 前后端职责分离,架构清晰:前端进行交互逻辑,后端负责数据处理. 前后端单独开发.单独测试. 良好的交互体验,前端进行的是局部渲染.避免了不必要的跳转和重复渲染. 当 ...
- 单页面应用SPA和多页面应用MPA
单页面应用(SinglePage Web Application,SPA) 只有一张Web页面的应用,是一种从Web服务器加载的富客户端,单页面跳转仅刷新局部资源 ,公共资源(js.css等)仅需加载 ...
- vue环境搭建及单页面标签切换实例
复习 """ 1.指令: v-once: <p v-once>{{ msg }}</p> v-cloak: 防止页面加载抖动 v-show:绑定的 ...
- Vue 子路由 与 单页面多路由 的区别
本文地址:http://www.cnblogs.com/veinyin/p/7911292.html 最近学完了基础课程,打算整理一波笔记,对基本概念梳理一遍,惊觉对子路由和单页面多路由混淆的一塌糊涂 ...
随机推荐
- DropDownList(For)
1.绑定数据源 方法一 Controllers:var users = GetUsers(); var selectList = new SelectList(users, "Value&q ...
- IDEAL葵花宝典:java代码开发规范插件 FindBugs-IDEA
前言: 检测代码中可能的bug及不规范的位置,检测的模式相比p3c更多,写完代码后检测下 避免低级bug,强烈建议用一下,一不小心就发现很多老代码的bug. 使用步骤: 1):打开 Settings ...
- Python 使用正则表达式验证密码必须包含大小写字母和数字
校验密码是否合法的程序. 输入一个密码 1.长度5-10位 2.密码里面必须包含,大写字母.小写字母和数字 3.最多输入5次 ===================================== ...
- tensorflow knn 预测房价 注意有 Min-Max Scaling
示例数据: 0.00632 18.00 2.310 0 0.5380 6.5750 65.20 4.0900 1 296.0 15.30 396.90 4.98 24.00 0.02731 0.00 ...
- 监听输入框变化(oninput,onpropertychange,onchange)
oninput,onpropertychange,onchange: oninput是onpropertychange的非IE浏览器版本,支持firefox和opera等浏览器,但有一点不同,它绑定于 ...
- C语言中数据类型和变量
C语言中的数据类型 数据类型的本质,固定大小内存块的别名. 数组名代表数组首元素的地址. 数组首元素的地址,&代表整个数组的地址. 数组数据类型,怎么定义数据数组类型,定义数组类型指针,数组类 ...
- Python: scikit-image 彩色图像滤波
一般的滤波器都是针对灰度图像的,scikit-image 库提供了针对彩色图像滤波的decorator:adapt_rgb,adapt_rgb 提供两种形式的滤波,一种是对rgb三个通道分别进行处理, ...
- zabbix告警邮件美化
为了更好的用户体验,我们需要尽量美化我们的输出内容,尽量做到整齐划一,让人看了会有很舒服的感觉, 这个好像和苹果的产品一样,给人一种美感让人感觉非常享受. 一般我们的zabbix告警邮件就是纯文字,建 ...
- <十五>UML核心视图动态视图之活动图
一:动态视图 --->动态视图是描述事物动态行为的. --->需要注意的是:动态视图不能够独立存在,它必需特指一个静态视图活uml元素,说明在静态视图规定的事物结构下它们的动态行为. -- ...
- ACM学习历程——UVA540 Team Queue(队列,map:Hash)
Description Team Queue Team Queue Queues and Priority Queues are data structures which are know ...