一、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. Use trained sklearn model with pyspark

    Use trained sklearn model with pyspark   from pyspark import SparkContext import numpy as np from sk ...

  2. LeetCode-5:Longest Palindromic Substring(最长回文子字符串)

    描述:给一个字符串s,查找它的最长的回文子串.s的长度不超过1000. Input: "babad" Output: "bab" Note: "aba ...

  3. linux shell date 时间运算以及时间差计算方法

    最近一段时间,在处理Shell 脚本时候,遇到时间的处理问题. 时间的加减,以及时间差的计算. 获取当前时间戳 date +%s . 时间加减 这里处理方法,是将基础的时间转变为时间戳,然后,需要增加 ...

  4. noip模拟赛 #2

    万年rk2 我写挂大家都挂但是有人比我挂的少 我好不容易卡一波常数然后有人ak ... T1.不想写,等会放链接 T2 给一个方阵,每个地方有一个权值,把它划成两块,不能往回拐弯,求两块极差较大的那个 ...

  5. Set connectionId threw an exception.

    今天调试一个WPF程序时,出现一个问题. 程序运行后抛出异常, "Set connectionId threw an exception. XXXXXXXXXX",原因是依赖的一个 ...

  6. kindle3 破解字体

    在万能的链接里下载kindle-fonts-4.4.N-k3.zip,update后kindle里出现linkfonts/fonts,这里就是存放字体的位置,字体格式需用.ttf. 在linkfont ...

  7. AR/VR-AR:AR

    ylbtech-AR/VR-AR:AR 增强现实技术(Augmented Reality,简称 AR),是一种实时地计算摄影机影像的位置及角度并加上相应图像.视频.3D模型的技术,这种技术的目标是在屏 ...

  8. 【win10激活问题】 从【win10专业工作站版】转为 数字许可证的【win10专业版】

    今天安装了 win10 1903 (10.0.18362 暂缺 Build 18362) 安装时 选的 是[win10 专业工作站版] 却无法激活, (因为当初是从win7升级上win10的,只有关联 ...

  9. Eclipse插件:tomcatPluginV33.zip 安装

    一.下载 地址:http://www.eclipsetotale.com/tomcatPlugin.html 二.安装 1.解压tomcatPluginV33.zip到Eclipse的\feature ...

  10. C#&nbsp;Andriod&nbsp;AES&nbsp;加密算法

    android端: package com.kingmed.http; import java.io.UnsupportedEncodingException; import javax.crypto ...