单页面应用的路由问题

一、概念

单页面引用 (SPA), 被定义成一个目的在于提供一种接近桌面应用程序的流畅用户体验单web页面应用程序.

一旦页面被第一次加载后，不再会发生整个页面的更新，而是只会发生页面的局部更新，这样前后端的数据交互量会很小，用户体验会更好。

　在一个SPA中, 所有必需的代码（HTML, JavaScript, 以及 CSS ），要不全部在初始页面中写好，要不在用户操作页面的过程中被动态加载。

开发单页面程序，因为只有一个总的html文件，会带来如下几个负面的问题：

1）总html文件的内容可能会比较多，一个文件的内容多了，就比较容易造成混乱，可读性和可维护性较差，管理和修改起来比较麻烦

2）在进行局部更新的时候，用户习惯希望页面的url也能发生变化，这样用户可以利用浏览器的前进和后退功能进行操作。

本文主要介绍如何在单页面情况下实现多视图的路由功能。

二、实现例子

在Angulajs中，实现机制是通过设置页面的 hash发生变化（可以通过链接或 js代码），触发一个路由，然后动态去更新局部页面内容。

    <div  ng-app="myApp" ng-controller="myCtrl"><ul><li><a href="#/a">click a</a></li><li><a href="javascript:;" onclick="window.location.hash='#/b'">click b</a></li></ul><ng-view></ng-view></div>

上面的html代码，希望实现的是当用户点击链接时，能从服务器或本地获取新的内容更新到 <ng-view> 标签对应的区域下。

为了实现上述目的，需要编写如下的Js代码：

angular.module("myApp",["ngRoute"]);angular.module("myApp").controller("myCtrl",function(){});angular.module("myApp").config(function($routeProvider) {$routeProvider.when('/a', {templateUrl: 'a.html',controller: 'aController'}).when('/b', {template: '<h1> i am b</h1>',controller: 'bController'}).otherwise({redirectTo: '/a'});});

最关键的就是上面最后一段代码。它定义了当浏览器的url的hash部分发生变化后，会自动触发局部内容的加载（templateUrl表示从服务器加载，template表示从本地加载）. 也可以根据需要为所加载的内容配置 controller。

三、存在的问题

利用angulajs，一个页面只能允许有一个 ng-view，对于复杂的页面设计，可能有些问题。

一个可能的解决方案是，不设置模板内容，而是在该路由的 controller中，进行页面的复杂操作。

单页面应用的路由问题相关推荐

SPA(单页面应用)、路由模式
SPA SPA ( single page App ) 单页面应用多页面应用有多个html文件,通过a标签的连接联通各个页面缺点开发起来太冗余,编译.压缩很耗时间页面之间的跳转速度太慢,这个 ...
你知道前端单页面路由是怎么实现的吗？
首先要学习一下history对象,history对象保存着用户的上网记录,从浏览器窗口打开的那一刻算起.出于安全的考虑,开发人员无法得知用户浏览过的URL.不过,借由用户访问过的页面列表,同样可以在不 ...
nignx部署Vue单页面刷新路由404问题解决
nignx部署Vue单页面刷新路由404问题解决参考文章: (1)nignx部署Vue单页面刷新路由404问题解决 (2)https://www.cnblogs.com/wuchenggong/p/ ...
Angular——单页面与路由的使用
单页面 SPA(Single Page Application)指的是通单一页面展示所有功能,通过Ajax动态获取数据然后进行实时渲染,结合CSS3动画模仿原生App交互,然后再进行打包(使用工具把W ...
vue 扫码页面限制区域_Vue.js 单页面多路由区域操作的实例详解
单页面多路由区域操作在一个页面中有两个及以上的区域,需要通过设置路由的index.js,来操作这些区域的内容 app.vue 中设置: index.js中设置: import vue from 'v ...
Vue入坑——vue-router单页面多路由配置
2019独角兽企业重金招聘Python工程师标准>>> 上一篇:vue-router如何传递参数一起学vue--vue学习总路线 ----------^~^我是萌萌哒分割线^~^- ...
mysql的请求分发,基于 gorilla/mux 实现路由匹配和请求分发：服务单页面应用
基于 gorilla/mux 实现路由匹配和请求分发:服务单页面应用由学院君创建于1年前, 最后更新于 1年前版本号 #1 1279 views 0 likes 0 collects 随着前后 ...
Vue-router路由使用，单页面的实现
1.安装路由系统 NPM npm install vue-router 2.在main.js中进入引用 import VueRouter from 'vue-router' 3.创建三个空的组件: V ...
单页面应用(SPA)前端路由hash 模式 VS history 模式
文章目录单页面应用(SPA) 前端路由的由来前端路由 hash 模式 history 模式 hash.history优缺点单页面应用(SPA) 简单的说 SPA 就是一个WEB项目只有一个 HT ...
单页面应用的前端路由原理是什么？
前置知识在了解单页面应用的前端路由原理之前,我们先了解下什么事单页面应用,什么是多页面应用,他们之间的区别又是什么? 什么是单页面应用? 单页面应用指的是第一次进入页面的时候会请求一个html文件, ...

单页面应用的路由问题

单页面应用的路由问题相关推荐

最新文章

热门文章