angularJs ui-router路由之多视图实现菜单缓存切换

一个模板中存在多个ui-view,每个ui-view都存在唯一的名称作为标识，通过v-show来判断当前的ui-view是否显示，实现如下图效果

以上可以实现基本的菜单切换，但是需要注意的是：

1每个页面模块的controller的命名不能相同，否则会出现调用方法的混乱，可能会进入到另一个同名的controller中调用方法；

2当使用此方法对页面进行缓存，如果打开多个模块用到websocket接受服务器消息时，不能使用WebSocketonmessage监听和接受服务器消息，否则可能会调用其他controller中WebSocketonmessage，当前的页面模块就会监听不到服务器消息，这时我们可以使用

socketaddEventListener('message', function (event) {

consolelog('Message from server ', eventdata);

});

进行服务器消息的监听，并在方法体内做判断，是否是当前页面需要的。

3如果某个页面的d出框用到了路由调用则d框中的页面不会显示，所以建议不要在d框中直接调用路由加载页面，或者可以在indexjsp中：

4如果几个模块views里面的name一样，则会出现加载的页面重复的问题；

5style样式：如果多个模块存在相同名称的选择器，则样式会冲突；

还有些问题会在后面慢慢补充。

6页面打开太多会出现卡顿现象

7一定要引入 <script src="vendor/angular/angular-ui-router-ext/ct-ui-router-extrasminjs"></script> ，否则会出现ui-view没有缓存的情况

在一个单页面中，我们可以添加多个模块，使得网页只在需要的时候加载这个模块。模块的切换大致上可以代替网页的切换，于是，我们便可以通过模块的切换实现网页的切换，这个切换是按需加载的。 乍一看非常普通的东西，但是仔细想想就可以发现，这种思想可以解决非常多的资源。 例如，假如有一个页面，需要显示1000种商品的信息，每个商品的表现形式各不相同（设他们有各自独立的css和js），那么一般来说，我们就需要准备1000张网页去加载这些信息。但是，使用这种模块化思想，我们就可以仅仅在后台设定1000个各不相同的模块，然后根据需要将需要的商品的对应模块加载到唯一一张页面上而已。 而要做到上面介绍的功能就必须使用路由功能了。 主体思路： 1">Sindre Sorhus</a></p> <p>Part of <a href="todomvccom">TodoMVC</a></p> </footer> <script src="node_modules/angular/angularjs"></script> <script src="node_modules/angular-route/angular-routejs"></script> <script src="js/appjs"></script> </body> </html> 其他的东西都是装饰，只要看第24行就可以了。 在路由区域和视图区域中，我们可以添加内容进去——甚至添加一个网页进去。 接下来请看对应的appjs。 var app = angularmodule("myTodo", ['ngRoute']); //路由的配置： appconfig(function($routeProvider) { var routeconfig = { templateUrl: "bodyhtml", controller: "myTodoCtrl" /controller: 'myTodoCtrl'/ } var ohter_config = { templateUrl: "otherhtml" } $routeProvider when("",routeconfig) //status ： 它对应我们页面的hash: all completed active //路由规则的优先级按写法的顺序所决定的 when("/other", ohter_config) when("/:aaa", routeconfig ) otherwise( { redirectTo: "/all" }); }); appcontroller("myTodoCtrl", function($scope, $routeParams, $filter){ consolelog($routeParams); }); 如果仅仅使用路由的话，以上的代码就足够使用了。它会保证; 1当页面停留在主页或者其他奇怪的地方的时候自动跳转到 /all 上面，网址是——127001:8020/finishAngularJS-mark2/indexhtml#/all 只需要注意index后面的就可以了。 2 当页面跳转方向是/other的时候，跳转到 127001:8020/finishAngularJS-mark2/iotherhtml 上 3 当出现特定的跳转的时候（这里规定跳转的是/active,/complete/all三个)，也会跳转到对应页面，但这是在index下的跳转—— 127001:8020/finishAngularJS-mark2/indexhtml#/active 127001:8020/finishAngularJS-mark2/indexhtml#/all 127001:8020/finishAngularJS-mark2/indexhtml#/complete 尤其注意的一点：除了2会跳出这个页面，其他的跳转是显示在规定的视图区和路由区上面的，body网页上的内容会被加载过来。 接下来我们讲解原理： appconfig(function($routeProvider) 这便是用来设定路由的代码，直接写就好 var routeconfig = { templateUrl: "bodyhtml", controller: "myTodoCtrl" /controller: 'myTodoCtrl'/ } var ohter_config = { templateUrl: "otherhtml" } 这是两个跳转，跳转是一个对象，templateUrl，即模板是bodyhtml，这就是为什么indexhtml会加载bodyhtml的原因。第二个参数是为这个模板添加控制器，名字是——myTodoCtrl。 第二个跳转因为不重要所以pass。 $routeProvider when("",routeconfig) //status ： 它对应我们页面的hash: all completed active //路由规则的优先级按写法的顺序所决定的 when("/other", ohter_config) when("/:aaa", routeconfig ) otherwise( { redirectTo: "/all" }); }); 这一段代码是用来进行判断的，当哈希值发生改变的时候，执行对应的跳转对象。 当哈希值为""即第二句，为空的时候，执行routeconfig 当哈希值为"/other",即第五局，执行other_config 当哈希值是一个特殊变量的时候，变量的名称为aaa，值为X（X可以是定义好的任何指，这里是all，complete，active中其中一个），即"/active","/complete","/all"的时候，执行routeconfig。 当哈希值是其他情况的时候，默认跳转到哈希值为"/all"上。 我们得到了哈希值，执行了后面的对象，取出对象的模板，添加在了主页上面，启动了控制器，整个路由便算完成了。 以上就是小编为大家带来的angularjs之路由的选择方法的全部内容了，希望对大家有所帮助，多多支持脚本之家~

AngularJS的ng-route模块为控制器和视图提供了[Deep-Linking]URL。 通俗来讲，ng-route模块中的$routeService监测$locationurl()的变化，并将它映射到预先定义的控制器。也就是在客户端进行URL的路由。 ionicjs对AngularJS进行了扩展

  之前找了很久也没解决的方法,终于找了个方法处理了,可能不是最佳的方法,但是可以实现功能,而且看上去没啥问题。

  先说下应用场景,a页面是A页面的子路由,通过点击a中的链接进行原地跳转,发现此时a页面的数据没有刷新,上一个版本是采用了在路由中添加时间轴的方式达到刷新效果,在当时是有效的;

        thisrouternavigate([url + new Date()getTime() + 'xxx'], {});

  不过在后来进行路由重构之后,使用了懒加载之后发现失效了,路由中的时间戳改变了,但是页面并没有变化,ngOnInit中的方法没有起作用,也就意味着页面没有进行重构,后来查找资料发现了可以先跳转到A路由,在跳转到a路由,实现效果和直接跳转到a是一样的。

            thisrouternavigateByUrl(url)then(() => {

          thisrouternavigate(url + new Date()getTime()], {});

        });

参考的文章链接

angularjs路由是指一款用angularjs前端语言设计出程序和框架的路由器

1AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

2路由器（Router），是连接因特网中各局域网、广域网的设备，它会根据信道的情况自动选择和设定路由，以最佳路径，按前后顺序发送信号。 路由器是互联网络的枢纽，"交通警察"。目前路由器已经广泛应用于各行各业，各种不同档次的产品已成为实现各种骨干网内部连接、骨干网间互联和骨干网与互联网互联互通业务的主力军。路由和交换机之间的主要区别就是交换机发生在OSI参考模型第二层（数据链路层），而路由发生在第三层，即网络层。这一区别决定了路由和交换机在移动信息的过程中需使用不同的控制信息，所以说两者实现各自功能的方式是不同的。

3路由器（Router）又称网关设备（Gateway）是用于连接多个逻辑上分开的网络，所谓逻辑网络是代表一个单独的网络或者一个子网。当数据从一个子网传输到另一个子网时，可通过路由器的路由功能来完成。因此，路由器具有判断网络地址和选择IP路径的功能，它能在多网络互联环境中，建立灵活的连接，可用完全不同的数据分组和介质访问方法连接各种子网，路由器只接受源站或其他路由器的信息，属网络层的一种互联设备。

1、先下载angular插件 >

1路由跳转a标签

routerLink 第一项为路由， 第二项必选参数（若无可以省略），第三项为可选参数 用{} 包起来；

2routingmodulets的配置 /:a ，表示必选参数a

3接收参数

用vue router如何获得当前页面的路由的方法如下：

路由器将自渲染对应的组件以及更新路由信息：

其中<router-view>可以传递props，支持v-ref,同时也可以使用v-transition和transition-mode来获得场景切换效果，被渲染的组件将注册到父级组件的this$对象上。

路由对象和路由匹配：

路由对象，即$router会被注入每个组件中，可以利用它进行一些信息的获取。

如属性 说明：

$routepath 当前路由对象的路径，如'/vi

$routequery 请求参数，如/foouser=1获取到queryuser = 1

$routerouter 所属路由器以及所属组件信息

$routematched 数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。

$routename 当前路径名字

当然，你也可以在自己定义路由规则（map)的时候自定义字段，用以特殊目的。

这里只是做了一些简单的介绍，最后，更多高级用法请参考官方文档。

以上就是关于angularJs ui-router路由之多视图实现菜单缓存切换全部的内容，包括:angularJs ui-router路由之多视图实现菜单缓存切换、Angular和express的路由是怎么回事、详解Angular路由 ng-route和ui-router的区别等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！