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

  1. 基于laravel5.4 vue 和vue-element搭建的单页面后台CMS

    介绍 该项目后台是基于vue和laravel搭建的单页面CMS系统,包含了文章管理,权限管理,用户管理等基本模块. 前台使用了传统web技术,laravel渲染搭建了个博客系统 github地址:ht ...

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

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

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

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

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

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

  5. webpack配合vue.js实现完整的单页面demo

    本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用,因为需要用到node的npm,所以确保安装了node,建议官网安装最新的稳定版本.并且在项目中需要加载一些npm包,由于npm的 ...

  6. Vue项目中设置每个单页面的标题

    两种实现方法,第一种方法引入插件,第二种为编程方式实现(推荐) 首先在路由文件index.js中给每个单页面路由添加title routes: [{     path: '/',     name: ...

  7. Vue - 使用命令行搭建单页面应用

    使用命令行搭建单页面应用 我们来看一下最后完成的效果: 大纲 1. 下载 node, git, npm 2. 使用命令行安装一个项目 一. 下载工具 node , git  的下载大家可以去官网自行下 ...

  8. 052——VUE中使用vue-cli初始化单页面应用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

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

  10. 单页面应用SPA架构

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

随机推荐

  1. 一图总结C++中关于指针的那些事

    指向对象的指针.指向数据成员的指针,指向成员函数的指针: 数组即指针,数组的指针,指针数组: 指向函数的指针,指向类的成员函数的指针,指针作为函数參数,指针函数: 指针的指针,指向数组的指针:常指针. ...

  2. 15.3.14 DP练习2

    拦截导弹 题目 某国为了防御敌国的导弹突击,发展出一种导弹拦截系统. 可是这样的导弹拦截系统有一个缺陷:尽管它的第一发炮弹可以到达随意的高度.可是以后每一发炮弹都不能高于前一发的高度. 某天,雷达捕捉 ...

  3. SQLite学习手册(转)

    原文网址:http://www.cnblogs.com/stephen-liu74/archive/2012/01/22/2328757.html 在实际的应用中,SQLite作为目前最为流行的开源嵌 ...

  4. swagger在线文档和离线文档

    spring boot项目的swagger文档. 依赖从spring boot的基础上增加.参考pom.xml: <dependency> <groupId>org.sprin ...

  5. pl/sql 实例精解 03

    1. 在Pl/sql 中使用 sql 1: /* 2: * 一个 pl/sql 语句块, 只是一个容器, 是表明一个整体的容器, 容器里可以放置多个sql语句 3: */ 4:   5: declar ...

  6. 扩张js的String——trim

    //去掉字符两端的空白字符  String.prototype.Trim=function () {      return this.replace(/(^[\t\n\r]*)|([\t\n\r]* ...

  7. 关于JSP生命周期的叙述,下列哪些为真?

    关于JSP生命周期的叙述,下列哪些为真? A.JSP会先解释成Servlet源文件,然后编译成Servlet类文件 B.每当用户端运行JSP时,jspInit()方法都会运行一次 C.每当用户端运行J ...

  8. JS刷新页面后滚动条的位置不变

    有时候,在网页中点击了页面中的按钮或是刷新了页面后,页面滚动条又 会回到顶部,想看后面的记录就又要拖动滚动条,或者要按翻页键,非常不方便,想在提交页面或者在页面刷新的时候仍然保持滚动条的位置不变,最好 ...

  9. 解决Ajax请求跨域问题

    from:https://blog.csdn.net/wang379275614/article/details/53333775 上篇文章提到,由于浏览器的同源策略,使得,AJAX请求只能发给同源的 ...

  10. iOS开发:iPhone6、6 plus适配

    本文转载至 http://jingyan.baidu.com/article/8cdccae97a5c2b315413cda9.html 1 2 3 4 5 6 7 分步阅读 随着苹果公司持续推出新产 ...