路由案例

最新推荐文章于 2022-11-20 14:30:24 发布
最新推荐文章于 2022-11-20 14:30:24 发布
阅读量326 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/c_hjf/article/details/78294821

复制链接网址查看效果图

http://localhost:63342/WebstormProjects/BShop/index.html?_ijt=e87emc5u7frg60oq1u8rv303ol#/home

代码:

(主页面)

<!DOCTYPE html>
<html ng-app="BShop">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link href="lib/ionic/css/ionic.css" rel="stylesheet"/>
    <script type="text/javascript" src="lib/ionic/js/ionic.bundle.js"></script>
    <link href="css/main.css" rel="stylesheet"/>
    <title>书店</title>
    <script type="text/javascript">
        var BShop = angular.module("BShop", ["ionic"]);
        BShop.config(function ($stateProvider, $urlRouterProvider) {
            $stateProvider.state("home", {
                url: "/home",
                views: {
                    "view-home": {
                        templateUrl: "views/home/home.html",
                        controller: "HomeCtrl"
                    }
                }
            }).state("cart", {
                url: "/cart",
                views: {
                    "view-cart": {
                        templateUrl: "views/cart/cart.html",
                    }
                }
            }).state("mine", {
                url: "/mine",
                views: {
                    "view-mine": {
                        templateUrl: "views/mine/mine.html",
                    }
                }
            });

            $urlRouterProvider.otherwise("home");
        });

        BShop.controller("HomeCtrl", function ($scope, $ionicSideMenuDelegate) {
            $scope.toggleLeft = function () {
                $ionicSideMenuDelegate.toggleLeft();
            }
        });
    </script>
</head>
<body>
<ion-nav-bar></ion-nav-bar>

<ion-side-menus>

    <ion-pane ion-side-menu-content>
        <ion-nav-bar class="bar-stable nav-title-slide-ios"></ion-nav-bar>
        <ion-nav-view animation="slide-left-right">

            <ion-nav-view name="view-home"></ion-nav-view>

        </ion-nav-view>
    </ion-pane>

    <ion-side-menu side="left" class="mine">

        <header class="bar bar-header bar-stable">
            <h1 class="title">个人中心</h1>
        </header>

        <ion-content class="has-header">
            <div class="avatar">
                <img src="img/mine_avatar.jpg" width="80px" height="80px"/>

                <p>姓名</p>
            </div>

            <div class="list">
                <a class="item item-icon-left item-icon-right">
                    <i class="icon ion-clipboard"></i>
                    我的订单
                    <i class="icon ion-ios-arrow-right"></i>
                </a>

                <a class="item item-icon-left item-icon-right">
                    <i class="icon ion-star"></i>
                    我的收藏
                    <i class="icon ion-ios-arrow-right"></i>
                </a>

                <a class="item item-icon-left item-icon-right">
                    <i class="icon ion-gear-a"></i>
                    设置
                    <i class="icon ion-ios-arrow-right"></i>
                </a>
            </div>
        </ion-content>

    </ion-side-menu>
</ion-side-menus>

<ion-tabs class="tabs-positive tabs-icon-top">
    <ion-tab title="首页" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline" ui-sref="home">
    </ion-tab>

    <ion-tab title="购物车" icon-on="ion-ios-cart" icon-off="ion-ios-cart-outline" ui-sref="cart">
        <ion-nav-view name="view-cart"></ion-nav-view>
    </ion-tab>

    <ion-tab title="我的" icon-on="ion-ios-person" icon-off="ion-ios-person-outline" ui-sref="mine">
        <ion-nav-view name="view-mine"></ion-nav-view>
    </ion-tab>
</ion-tabs>
</body>
</html>

//首页页面

<ion-view title="首页" class="home">
    <ion-nav-buttons side="left">
        <button class="button button-icon ion-ios-more" ng-click="toggleLeft()"></button>
    </ion-nav-buttons>

    <ion-content>
        <ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher>

        <ion-list>
            <ion-item>
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="128px" height="128px"/>
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>
                    <h3>C++、Java中的圣经级著作</h3>

                    <div>
                        <span>{{ 86.40 | currency: "￥" }}</span>
                        <i class="icon ion-ios-cart"></i>
                    </div>
                </div>
            </ion-item>
            <ion-item>
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="128px" height="128px"/>
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>
                    <h3>C++、Java中的圣经级著作</h3>

                    <div>
                        <span>{{ 86.40 | currency: "￥" }}</span>
                        <i class="icon ion-ios-cart"></i>
                    </div>
                </div>
            </ion-item>
            <ion-item>
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="128px" height="128px"/>
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>
                    <h3>C++、Java中的圣经级著作</h3>

                    <div>
                        <span>{{ 86.40 | currency: "￥" }}</span>
                        <i class="icon ion-ios-cart"></i>
                    </div>
                </div>
            </ion-item>
            <ion-item>
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="128px" height="128px"/>
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>
                    <h3>C++、Java中的圣经级著作</h3>

                    <div>
                        <span>{{ 86.40 | currency: "￥" }}</span>
                        <i class="icon ion-ios-cart"></i>
                    </div>
                </div>
            </ion-item>
            <ion-item>
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="128px" height="128px"/>
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>
                    <h3>C++、Java中的圣经级著作</h3>

                    <div>
                        <span>{{ 86.40 | currency: "￥" }}</span>
                        <i class="icon ion-ios-cart"></i>
                    </div>
                </div>
            </ion-item>
            <ion-item>
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="128px" height="128px"/>
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>
                    <h3>C++、Java中的圣经级著作</h3>

                    <div>
                        <span>{{ 86.40 | currency: "￥" }}</span>
                        <i class="icon ion-ios-cart"></i>
                    </div>
                </div>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

//购物车页面

<ion-view title="购物车" class="cart">
    <ion-content>
        <ion-list>
            <ion-item>
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="96px" height="96px"/>
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>

                    <h3>{{ 86.40 | currency: "￥" }}</h3>

                    <div>
                        <i class="icon ion-minus-circled"></i>
                        <span> 1 </span>
                        <i class="icon ion-plus-circled"></i>
                        <i class="icon ion-android-delete"></i>
                    </div>
                </div>
            </ion-item>
            <hr>
            <ion-item>
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="96px" height="96px"/>
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>

                    <h3>{{ 86.40 | currency: "￥" }}</h3>

                    <div>
                        <i class="icon ion-minus-circled"></i>
                        <span> 1 </span>
                        <i class="icon ion-plus-circled"></i>
                        <i class="icon ion-android-delete"></i>
                    </div>
                </div>
            </ion-item>
            <hr>
            <ion-item>
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="96px" height="96px"/>
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>

                    <h3>{{ 86.40 | currency: "￥" }}</h3>

                    <div>
                        <i class="icon ion-minus-circled"></i>
                        <span> 1 </span>
                        <i class="icon ion-plus-circled"></i>
                        <i class="icon ion-android-delete"></i>
                    </div>
                </div>
            </ion-item>
            <hr>
            <ion-item>
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="96px" height="96px"/>
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>

                    <h3>{{ 86.40 | currency: "￥" }}</h3>

                    <div>
                        <i class="icon ion-minus-circled"></i>
                        <span> 1 </span>
                        <i class="icon ion-plus-circled"></i>
                        <i class="icon ion-android-delete"></i>
                    </div>
                </div>
            </ion-item>
            <hr>
            <ion-item>
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="96px" height="96px"/>
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>

                    <h3>{{ 86.40 | currency: "￥" }}</h3>

                    <div>
                        <i class="icon ion-minus-circled"></i>
                        <span> 1 </span>
                        <i class="icon ion-plus-circled"></i>
                        <i class="icon ion-android-delete"></i>
                    </div>
                </div>
            </ion-item>
            <hr>
            <ion-item>
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="96px" height="96px"/>
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>

                    <h3>{{ 86.40 | currency: "￥" }}</h3>

                    <div>
                        <i class="icon ion-minus-circled"></i>
                        <span> 1 </span>
                        <i class="icon ion-plus-circled"></i>
                        <i class="icon ion-android-delete"></i>
                    </div>
                </div>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

//我的页面

<ion-view title="个人中心" class="mine">
    <ion-nav-buttons side="right">
        <button class="button button-icon ion-ios-compose-outline" ng-click="toggleLeft()"></button>
    </ion-nav-buttons>

    <ion-content>
        <div class="avatar">
            <img src="img/mine_avatar.jpg" width="80px" height="80px"/>

            <p>姓名</p>
        </div>

        <div class="list">
            <a class="item item-icon-left item-icon-right">
                <i class="icon ion-clipboard"></i>
                我的订单
                <i class="icon ion-ios-arrow-right"></i>
            </a>

            <a class="item item-icon-left item-icon-right">
                <i class="icon ion-star"></i>
                我的收藏
                <i class="icon ion-ios-arrow-right"></i>
            </a>

            <a class="item item-icon-left item-icon-right">
                <i class="icon ion-gear-a"></i>
                设置
                <i class="icon ion-ios-arrow-right"></i>
            </a>
        </div>
    </ion-content>
</ion-view>

//css布局

.home .picture {
    float: left;
}

.home .details h3 {
    

margin-top: 16px;
}

.home .details div {
    margin-top: 48px;
}

.home .details span {
    color: red;
    font-size: large;
}

.home .details .ion-ios-cart {
    position: absolute;
    

right: 16px;
}

.cart .picture {
    float: left;
}

.cart .details

h3 {
    margin-top: 16px;
    color: red;
    font-size:

large;
}

.cart .details div {
    margin-top: 16px;
}

.cart

.details div .ion-android-delete {
    position: absolute;
    

right: 16px;
}

.cart .item {
    border-width: 0;
}

.cart hr {
    

border: 1px dotted #999;
    margin-left: 12px;
    margin-

right: 12px;
}

.mine .avatar {
    width: 100%;
    height:

160px;
    background: url("../img/mine_bg.jpg") no-repeat;
   

 background-size: cover;
    text-align: center;
}

.mine

.avatar img {
    border-radius: 50%;
    margin-top: 30px;
}


snow箴言
关注
静态路由（理论部分）
m0_61338464的博客
10-29 1668
一、路由 从源主机到目标主机的转发过程。 1.1、路由分类 直连路由 非直连路由（静态和动态路由） 1.2、路由协议分类 静态路由协议——由管理员手动配置的路由 动态路由协议——路由器间自动学习的 1.3 静态路由 静态路由协议只能用于小规模企业网络。 1.3.1、优点 配置灵活、管理员手动配置（可以指定路径）、节省链路开销。 1.3.2、缺点 当拓扑发生改变时，需要管理员去每台路由器上修改路由配置。 1.3.3、默认路由 默认路由是一种...
案例：后台管理案例(VUE路由案例)
酷爱前端的小陈博客
05-08 3009
1. 素材下载： 练习资料素材上传到如下链接，需要的自行下载： 案例：后台管理系统（VUE路由）素材https://download.youkuaiyun.com/download/qq_57587705/85320825 2. 案例效果 3. 案例用到的知识点 ⚫ 命名路由 ⚫ 路由重定向 ⚫ 导航守卫 ⚫嵌套路由 ⚫ 动态路由匹配 ⚫ 编程式导航 4. 案例各个部分的实例代码(这里只提供修改的代码) 项目目录： 路由模块index.js部分： import Vu..
路由案例01
Czy010506的博客
11-20 499
vue.js
一个路由实例
xiaobing_hope的专栏
11-17 535
一个路由实例 为何要使用route路由： AJAX 请求不会留下 History 记录 用户无法直接通过 URL 进入应用中的指定页面(保存书签、链接分享给朋友)  AJAX对 SEO 是个灾难 html> lang="en" ng-app="myApp"> charset="UTF-8"> Example - example-example64-produc
搭建路由实例
weixin_34211761的博客
04-22 345
路由表和路由条目 创建专有网络时，系统会为该专有网络自动创建一个路由器和一张路由表。 路由表中的每一项是一条路由条目。路由条目指定了网络流量的导向目的地，由目标网段、下一跳类型、下一跳三部分组成。路由条目包括系统路由和自定义路由。 您不可以直接删除专有网络的路由器或路由表，但可以在路由表中添加自定义路由条目转发流量。删除VPC后，关联的路由器和路由表也会随之删除。 系统路由 您不可以创建...
路由小案例
PremierAmour的博客
12-21 414
准备工作 angular.min.js angular-route.js index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>路由</title> <script src="js/angular.min.js" type="tex
案例：后台管理系统（VUE路由案例）素材.zip
05-08
总结来说，这个"后台管理系统（VUE路由案例）素材"提供了学习和实践Vue Router及其在后台管理系统中应用的机会。通过理解和运用其中的代码，开发者不仅可以掌握Vue Router的基本用法，还能了解如何结合Vue.js的其他...
cisco路由案例实战
09-18
### cisco路由案例实战知识点详解 #### 一、引言 在《Cisco路由案例实战》这份文档中，Combat-Lab培训机构分享了一系列针对CCNA、CCNP、CCIE等认证的实际应用案例和技术要点。该文档强调了理论与实践相结合的重要...
vue 动态配置路由案例.zip
最新发布
05-28
vue 动态配置路由案例 vue 动态配置路由案例 vue 动态配置路由案例 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm ...
H3C_静态路由基础配置案例
04-15
【静态路由基础配置案例】 在IT网络领域，静态路由是一种基本的路由配置方式，它用于指明网络设备如何将数据包转发到特定的目标网络。在本案例中，我们讨论的是在H3C设备上进行静态路由的基础配置，适用于H3CV7版本...
Packet Tracer经典案例之路由交换入门篇
03-07
Packet Tracer经典案例之路由交换入门篇
topo 拓扑图例子
09-25
一个容易扩展的拓扑图,js写的,下载就能看到效果.
路由简单案例
anshuangxin6666的博客
12-17 234
路由 ul{ list-style: none; } ul li{ float: left; width: 200px; } a{ text-decoration: none; } 主页 购物车 我的 var app = angular.module("myApp",["ngRoute"]); app.contr
路由简单案例（底层原理版）
weixin_45805459的博客
10-08 155
通过给多个a链接设置不同hash地址，然后在点击不同a链接进行切换，这时页面的href地址的hash值会发生变化，此时通过以上的语句就可以监测到hash值的变化，将检测到的hash值赋值给组件变量名，然后通过动态组件进行组件切换即可达到路由效果 ...
路由入门案例：路由规则
m0_53284765的博客
01-16 651
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>路由规则</title> </head> <body> <div id='app'> <!-- 2.添加路由链接 --> <router-link to="/user">用户</router-link> <
文章标题 简单路由案例
xingyueyezi01的博客
10-21 237
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="angular.js"></script> <style> a{ text-decoration: none;} div{ border: 1px solid; widt
静态路由简单案例
chanxi4688的博客
08-07 1071
操作平台：GNS3静态路由简介静态路由一种路由的方式，路由项为手动配置，而非动态决定。与动态路由不同，静态路由是固定的，不会改变，即使网络状况已经改变或是重新被组态。一般来说，静态路由是由网络管理员逐项加入路由表。实验过程配置二个静态路由测试相同拖二台路由器，二台vpc至操作界面 连接vpc和路由器 标注路由器和pc机地址 点击开启，在选项卡中配置路由器和pc机地址配置pc1地址配置路由器RI地址...
路由器配置实例--100例
weixin_33708432的博客
03-26 196
经典学路由 转载于:https://blog.51cto.com/maleilei/142595
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值