<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="bower_components/vue/dist/vue.js"></script>

    <script src="bower_components/vue-router/dist/vue-router.js"></script>

    <style>

    </style>

</head>

<body>

<!--

    vue-> SPA应用，单页面应用

    vue-resouce    交互

    vue-router    路由

    根据不同url地址，出现不同效果

    咱上课: 0.7.13版本

$ bower install vue-router#0.7.13

-->

    <div id="box">

        <ul>

            <li>

                <!--  href=""不能使用了 ，点击内容显示在router-view之中，-->

                <a v-link="{path:'/home'}" >主页</a>

            </li>

            <li>

                <a v-link="{path:'/news'}">新闻</a>

            </li>

        </ul>

        <div>

            <router-view></router-view>

        </div>

    </div>

    <script>

        //1. 准备一个根组件

        var App=Vue.extend();

        //2. Home News组件都准备

        var Home=Vue.extend({//Home是一个类

            template:'<h3>我是主页</h3>'

        });

        var News=Vue.extend({

            template:'<h3>我是新闻</h3>'

        });

        //3. 准备路由

        var router=new VueRouter();

        //4. 关联

        router.map({

            'home':{

                component:Home

            },

            'news':{

                component:News

            }

        });

        //5. 启动路由

        router.start(App,'#box');

        //6. 跳转，默认显示home

        router.redirect({

            '/':'/home'      //'/':'home'

        });

    </script>

</body>

</html>

多层路由：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="bower_components/vue/dist/vue.js"></script>

    <script src="bower_components/vue-router/dist/vue-router.js"></script>

    <style>

        /* v-link点的时候会自动加这个样式*/

        .v-link-active{

            font-size: 20px;

            color: #f60;

        }

    </style>

</head>

<!--

路由嵌套(多层路由):

    主页    home

        登录    home/login

        注册    home/reg

    新闻页    news

-->

<body>

    <div id="box">

        <ul>

            <li>

                <a v-link="{path:'/home'}">主页</a>

            </li>

            <li>

                <a v-link="{path:'/news'}">新闻</a>

            </li>

        </ul>

        <div>

            <router-view></router-view>

        </div>

    </div>

    <template id="home">

        <h3>我是主页</h3>

        <div>

            <a v-link="{path:'/home/login'}">登录</a>

            <a v-link="{path:'/home/reg'}">注册</a>

        </div>

        <div>

            <router-view></router-view>

        </div>

    </template>

    <template id="news">

        <h3>我是新闻</h3>

    </template>

    <script>

        //1. 准备一个根组件

        var App=Vue.extend();

        //2. Home News组件都准备

        var Home=Vue.extend({

            template:'#home'

        });

        var News=Vue.extend({

            template:'#news'

        });

        //3. 准备路由

        var router=new VueRouter();

        //4. 关联

        router.map({

            'home':{

            /*

            data(){},

            methods:{},

            */

                component:Home,

                subRoutes:{

                    'login':{

                        component:{

                            template:'<strong>我是登录信息</strong>'

                        }

                    },

                    'reg':{

                        component:{

                            template:'<strong>我是注册信息</strong>'

                        }

                    }

                }

            },

            'news':{

                component:News

            }

        });

        //5. 启动路由

        router.start(App,'#box');

        //6. 跳转

        router.redirect({

            '/':'home'

        });

    </script>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="bower_components/vue/dist/vue.js"></script>

    <script src="bower_components/vue-router/dist/vue-router.js"></script>

    <style>

        .v-link-active{

            font-size: 20px;

            color: #f60;

        }

    </style>

</head>

<body>

    <div id="box">

        <ul>

            <li>

                <a v-link="{path:'/home'}">主页</a>

            </li>

            <li>

                <a v-link="{path:'/news'}">新闻</a>

            </li>

        </ul>

        <div>

            <router-view></router-view>

        </div>

    </div>

    <template id="home">

        <h3>我是主页</h3>

        <div>

            <a v-link="{path:'/home/login/zns'}">登录</a>

            <a v-link="{path:'/home/reg/strive'}">注册</a>

        </div>

        <div>

            <router-view></router-view>

        </div>

    </template>

    <template id="news">

        <h3>我是新闻</h3>

        <div>

            <a v-link="{path:'/news/detail/001'}">新闻001</a>

            <a v-link="{path:'/news/detail/002'}">新闻002</a>

        </div>

        <router-view></router-view>

    </template>

    <template id="detail">

        {{$route.params | json}}  <!--获取：后面的值 params={'id':'001'}-->

        <br>

        {{$route.path}}  <!-- '/news/detail/002'-->

        <br>

        {{$route.query | json}}  <!-- 数据-->

    </template>

    <script>

        //1. 准备一个根组件

        var App=Vue.extend();

        //2. Home News组件都准备

        var Home=Vue.extend({

            template:'#home'

        });

        var News=Vue.extend({

            template:'#news'

        });

        var Detail=Vue.extend({

            template:'#detail'

        });

        //3. 准备路由

        var router=new VueRouter();

        //4. 关联

        router.map({

            'home':{

                component:Home,

                subRoutes:{

                    'login/:name':{

                        component:{

                            template:'<strong>我是登录信息 {{$route.params | json}}</strong>'//获取：后面的值

                        }

                    },

                    'reg':{//先通过path找到component，然后找通过component找template，最后通过template找标签id页面，

                        component:{

                            template:'<strong>我是注册信息</strong>'

                        }

                    }

                }

            },

            'news':{

                component:News,

                subRoutes:{

                    '/detail/:id':{//id是path传过来的，

                        component:Detail

                    }

                }

            }

        });

        //5. 启动路由

        router.start(App,'#box');

        //6. 跳转

        router.redirect({

            '/':'home'

        });

    </script>

</body>

</html>

vue22 路由的更多相关文章

  1. Angular2入门系列教程6-路由（二）-使用多层级路由并在在路由中传递复杂参数

    上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...

  2. Angular2入门系列教程5-路由（一）-使用简单的路由并在在路由中传递参数

    上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...

  3. nodejs进阶(3)—路由处理

    1. url.parse(url)解析 该方法将一个URL字符串转换成对象并返回. url.parse(urlStr, [parseQueryString], [slashesDenoteHost]) ...

  4. .NetCore MVC中的路由（2）在路由中使用约束

    p { margin-bottom: 0.25cm; direction: ltr; color: #000000; line-height: 120%; orphans: 2; widows: 2 ...

  5. .NetCore MVC中的路由（1）路由配置基础

    .NetCore MVC中的路由(1)路由配置基础 0x00 路由在MVC中起到的作用 前段时间一直忙于别的事情,终于搞定了继续学习.NetCore.这次学习的主题是MVC中的路由.路由是所有MVC框 ...

  6. ASP.NET路由模型解析

    大家好,我又来吹牛逼了 ~-＿-~ 转载请注明出处:来自吹牛逼之<ASP.NET路由模型解析> 背景:很多人知道Asp.Net中路由怎么用的,却不知道路由模型内部的运行原理,今天我就给大家 ...

  7. 路由的Resolve机制（需要了解promise）

    angular的resovle机制,实际上是应用了promise,在进入特定的路由之前给我们一个做预处理的机会 1.在进入这个路由之前先懒加载对应的 .js $stateProvider .state ...

  8. Android业务组件化之子模块SubModule的拆分以及它们之间的路由Router实现

    前言: 前面分析了APP的现状以及业务组件化的一些探讨(Android业务组件化之现状分析与探讨),以及通信的桥梁Scheme的使用(Android业务组件化之URL Scheme使用),今天重点来聊 ...

  9. ASP.NET Core的路由[5]：内联路由约束的检验

    当某个请求能够被成功路由的前提是它满足某个Route对象设置的路由规则,具体来说,当前请求的URL不仅需要满足路由模板体现的路径模式,请求还需要满足Route对象的所有约束.路由系统采用IRouteC ...

随机推荐

  1. php nusoap类的使用、用法、出错 及说明

    NuSOAP 是 PHP 环境下的 WEB 服务编程工具,用于创建或调用 WEB 服务它是一个开源软件,当前版本是 0.7.2 ,支 持 SOAP1.1 WSDL1.1 ,可以与其他支持 SOAP1. ...

  2. rdesktop 脚本

    [root@Eren liwm]# cat rdesktop.sh #!/bin/bash -rdesktop -u user  192.168.122.10 -r sound:local -g 10 ...

  3. FarPoint自动换行

    单元格自动换行 FarPoint.Win.Spread.CellType.TextCellType mType = new FarPoint.Win.Spread.CellType.TextCellT ...

  4. 黑马程序猿-----Java之你不得不知道的排序

    ------<a href="http://www.itheima.com" target="blank">Java培训.Android培训.iOS ...

  5. R语言适配问题集锦

    画图时的中文乱码问题 我这是Mac Yousemite 10.10.5,在两个地方遇到了中文乱码 1.使用wordcloud包绘制中文标签云时. library(wordcloud) mydata & ...

  6. 【POJ 1845】 Sumdiv (整数唯分+约数和公式+二分等比数列前n项和+同余)

    [POJ 1845] Sumdiv 用的东西挺全 最主要通过这个题学了约数和公式跟二分求等比数列前n项和 另一种小优化的整数拆分  整数的唯一分解定理: 随意正整数都有且仅仅有一种方式写出其素因子的乘 ...

  7. leetcode——Insertion Sort List 对链表进行插入排序（AC）

    Sort a linked list using insertion sort. class Solution { public: ListNode *insertionSortList(ListNo ...

  8. [COI2007] [luogu P1823] Patrik 音乐会的等待 解题报告 （单调栈）

    题目链接:https://www.luogu.org/problemnew/show/P1823 题目: N个人正在排队进入一个音乐会.人们等得很无聊,于是他们开始转来转去,想在队伍里寻找自己的熟人. ...

  9. 那些不兼容 IE11的网站（持续更新）

    此博文用于收集不兼容 IE11 的网站,持续更新,请网站开发者自己认领: 兼容性引起的功能缺陷: v.qq.com (提示未安装 Flash 播放器,这问题我反馈几百年了,还没修复) tv.sohu. ...

  10. UVa 729 The Hamming Distance Problem【枚举排列】

    题意:给出数组的长度n,给出h,表示这个数组里面含有h个1,求其所有的排列 用next_permutation就可以了 #include<iostream> #include<cst ...