<!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. HDU-1358 Period 字符串问题 KMP算法 求最小循环节

    题目链接:https://cn.vjudge.net/problem/HDU-1358 题意 给一个字符串,对下标大于2的元素,问有几个最小循环节 思路 对每个元素求一下minloop,模一下就好 提 ...

  2. k8s使用ceph存储

    目录 ceph配置 k8s 配置 通过静态pv,pvc使用ceph 测试多pod挂载静态pv数据不一致问题 StoragaClass 方式 ceph 常用命令 k8s 常用命令 k8s各类端口及IP说 ...

  3. 紫书 例题8-7 UVa 11572（滑动窗口）

    滑动窗口这个方法名字非常形象, 先是窗口的右指针尽量往右滑, 滑不动了就滑窗口的左指针, 滑到右指针又可以开始滑动为止. 这道题是要记录滑的过程中最大的窗口长度, 限制条件是窗口中不能出现重复的值. ...

  4. 洛谷P4894 GodFly求解法向量

    如果没有学过向量相关知识请出门右转高中数学必修四~~~ 当然如果你和我一样也是小学生我也不反对 首先说结论:\(\vec{z}=(y1z2-y2z1,z1x2-z2x1,x1y2-x2y1)\) 其实 ...

  5. Spring学习总结（14）——Spring10种常见异常解决方法

    在程序员生涯当中,提到最多的应该就是SSH三大框架了.作为第一大框架的Spring框架,我们经常使用. 然而在使用过程中,遇到过很多的常见异常,我在这里总结一下,大家共勉. 一.找不到配置文件的异常 ...

  6. String spilt时转义特殊字符【转】

    在使用String.split方法分隔字符串时,分隔符如果用到一些特殊字符,可能会得不到我们预期的结果. 我们经常使用public String[] split(String regex)方法来拆分一 ...

  7. [Transducer] Make an Into Helper to Remove Boilerplate and Simplify our Transduce API

    Our transduce function is powerful but requires a lot of boilerplate. It would be nice if we had a w ...

  8. spring注解中@component是什么意思

    @Component("userManager") public class UserManagerImpl implements UserManager { private Us ...

  9. C语言打印100以内的质数

    C语言打印100以内的质数 #include <stdio.h> int main() { int number; int divisor; for( number = 3; number ...

  10. Ubuntu下用glade和GTK+开发C语言界面程序(一)

    前言:对于大学中计算机系的每年暑假的课设有太多想说的,能从中学到非常多东西,当然不排除打酱油的,这些能够掠过哦,凡事都打酱油.人生也是打酱油的吧. 2333. 对于大三曾经的课设一般的要求都是用C写的 ...