一、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)带来的问题的更多相关文章

  1. PushState+Ajax实现简单的单页面应用SPA

    http://www.helloweba.com/view-blog-386.html 单页面应用(Single Page Application)简称SPA,使用SPA构建的应用优点有用户体验好.速 ...

  2. (转)前端:将网站打造成单页面应用SPA

    前端:将网站打造成单页面应用SPA(一) Coffce 680 6月19日 发布 推荐 6 推荐 收藏 85 收藏,3.1k 浏览 前言 不知你有没有发现,像Github.百度.微博等这些大站,已经不 ...

  3. 前端:将网站打造成单页面应用SPA

    前端:将网站打造成单页面应用SPA   前言 不知你有没有发现,像Github.百度.微博等这些大站,已经不再使用普通的a标签做跳转了.他们大多使用Ajax请求替代了a标签的默认跳转,然后使用HTML ...

  4. 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)

    1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 ...

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

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

  6. 单页面应用SPA架构

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

  7. 单页面应用SPA和多页面应用MPA

    单页面应用(SinglePage Web Application,SPA) 只有一张Web页面的应用,是一种从Web服务器加载的富客户端,单页面跳转仅刷新局部资源 ,公共资源(js.css等)仅需加载 ...

  8. vue环境搭建及单页面标签切换实例

    复习 """ 1.指令: v-once: <p v-once>{{ msg }}</p> v-cloak: 防止页面加载抖动 v-show:绑定的 ...

  9. Vue 子路由 与 单页面多路由 的区别

    本文地址:http://www.cnblogs.com/veinyin/p/7911292.html 最近学完了基础课程,打算整理一波笔记,对基本概念梳理一遍,惊觉对子路由和单页面多路由混淆的一塌糊涂 ...

随机推荐

  1. 手机移动端网站开发流程HTML5

    手机移动端网站开发流程HTML5 最近一直在研究移动手机网站的开发,发现做手机网站没有想象中的那么难.为什么会这么说呢?我们试想下:我们连传统的PC网站都会做,难道连一个小小的手机网站难道都搞不定吗? ...

  2. 分享知识-快乐自己:SpringMvc中 页面日期格式到后台的类型转换

    日期格式的类型转换: 以往在 from 表单提交的时候,都会有字符串.数字.还有时间格式等信息. 往往如果是数字提交的话底层会自动帮我们把类型进行了隐式转换. 但是日期格式的却不能自动转换,这就需要我 ...

  3. python-while循环,for ,以及字符串格式化

    1.字符串格式化 name="suwukong" print("欢迎",name,"光临")print("欢迎 "+na ...

  4. boobmarklet

    bookmarklet ,一般都称呼为小书签.它是一段 JavaScript 脚本,一般网络上的小书签都是一个链接,它的安装非常简单,只需要把链接拖到你的收藏夹里. 利用它,可以实现一些页面优化.性能 ...

  5. JSON 的正确用法:Python、MongoDB、JavaScript与AjaxJSON 的正确用法:Python、MongoDB、JavaScript与Ajax

    本文主要总结网站编写以来在传递 JSON 数据方面遇到的一些问题以及目前采用的解决方案.网站数据库采用 MongoDB,后端是 Python,前端采用“半分离”形式的 Riot.js,所谓半分离,是说 ...

  6. 怎么看时序图--nand flash的读操作详解

    出处:http://blog.chinaunix.net/uid-28852942-id-3992727.html 这篇文章不是介绍 nand flash的物理结构和关于nand flash的一些基本 ...

  7. Java中的内部类介绍(1)

    栗子1: package campu; //外部类 class Out{ private int age =12; //内部类 class In{ public void print(){ Syste ...

  8. IOS技能要求

    iOS专业技能: 拥有独立开发iOS APP应用的能力,并且独立开发过多款应用:熟练掌握iOS主流界面布局设计,基本控件和自定义控件的使用,事件处理及事件分发机制:熟练掌握工厂.代理.观察者.单例等多 ...

  9. SQL Replication

    http://www.cnblogs.com/CareySon/archive/2012/06/20/IntroductToSQLServerReplicationPart1.html http:// ...

  10. Deepin安装wxpython教程

    环境: 安装报错: 解决:  1.sudo apt-get install libgtk-3-dev -y 2.sudo apt-get install freeglut3-dev libgstrea ...