Vue.js本身只提供数据与视图绑定及组件化等功能，如果想用它来开发一个完整的SPA（单页面应用），我们就还需要使用一些Vue.js的插件。今天我学习一种叫做Vue-router的插件，用来提供路由管理这个功能。

一、安装vue-router插件

　　1、安装bower：和npm类似的　

　　bower-> （前端）包管理器
　　npm install bower -g　　　　　　验证: bower --version

　　bower用法：

　　bower install <包名>　　　　　安装包　　　
　　bower uninstall <包名>　　　　卸载包
　　bower info <包名> 　　　　　   查看包版本信息

　　2、用bower安装vue和vue-router插件

　　　　bower install vue

　　　　bower install vue-router

二、路由的基本用法

　　　1、vue-router的基本作用就是将每个路径映射到对应的组件，并通过修改路由进行组件间的切换。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>路由的基本用法</title>
　　<!--引入插件-->

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

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

</head>

<body>

<div id="box">

    <ul>

        <!--跳转链接，使用v-link指令，path的值对应跳转的路径，即#！/home-->

        <li><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({

        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')

</script>

</body>

</html>

运行结果：当点击“主页”的时候，出现“我是主页”当点击“新闻”的时候，出现“我是新闻”

　　　　　　

　　2、跳转：router.redirect()：设置路由

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>路由的基本用法</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>

<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>

<script>

    //1.准备一个根组件

    var App=Vue.extend();

    //2.Home News组件准备

    var Home=Vue.extend({

        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.跳转

    router.redirect({　　　　

        '/':'home'

    });

</script>

</body>

</html>

运行结果：

　　　　

三、嵌套路由

　　1、一般应用中的路由方式不会像上面的例子的那么简单，往往会出现二级导航这种情况。这种时候就需要使用嵌套路由这种写法、

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>路由的多层嵌套</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: red;

        }

    </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">

    <h1>我是主页</h1>
　　　<!--嵌套层-->

    <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">

    <h1>我是新闻</h1>

</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':{

            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>

运行结果：

　　　　　

　　2、路由匹配：Vue-router在设置路由规则的时候，支持以冒号开头的动态片段

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>路由的多层嵌套</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: red;

        }

    </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">

    <h1>我是主页</h1>

    <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">

    <h1>我是新闻</h1>

    <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">
　　<!--获取路径上id的值-->

{{$route.params|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':{

                    component:{

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

                    }

                },

                'reg':{

                    component:{

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

                    }

                }

            }

        },

        'news':{

            component:News,
　　　　　　　　<!--路由匹配-->

            subRoutes:{

                '/detail/:id':{

                    component:Detail

                }

            }

        }

    });

    //5.启动路由

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

    //6.跳转

    router.redirect({

        '/':'home'

    });

</script>

</body>

</html>

运行结果：

　　　　　　

四、路由对象

　　在使用Vue-router启动应用时，每个匹配的组件实例都会被注入router的对象，称之为路由对象。在组件内部可以通过this.$route的方式进行调用。

　　路由对象有以下几个属性：

　　{$route.params | json}} -> 当前参数

　　{{$route.path}} -> 当前路径
　　{{$route.query | json}} -> 数据

　　示例：

<!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'}">登录</a>

            <a v-link="{path:'/home/reg'}">注册</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}}

        <br>

        {{$route.path}}

        <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':{

                        component:{

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

                        }

                    },

                    'reg':{

                        component:{

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

                        }

                    }

                }

            },

            'news':{

                component:News,

                subRoutes:{

                    '/detail/:id':{

                        component:Detail

                    }

                }

            }

        });

        //5. 启动路由

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

        //6. 跳转

        router.redirect({

            '/':'home'

        });

    </script>

</body>

</html>

运行结果：

　　　　

　　

　　

vue.js之路由的更多相关文章

  1. Vue.js之路由系统

    Vue.js生态之vue-router vue-router是什么? vue-router是Vue的路由系统,定位资源的,我们可以不进行整页刷新去切换页面内容. vue-router的安装与基本配置 ...

  2. Vue.js：路由

    ylbtech-Vue.js:路由 1.返回顶部 1. Vue.js 路由 本章节我们将为大家介绍 Vue.js 路由. Vue.js 路由允许我们通过不同的 URL 访问不同的内容. 通过 Vue. ...

  3. vue.js嵌套路由-------由浅入深

    嵌套路由就是路由里面嵌套他的子路由 子路由关键属性children 每一个子路由里面可以嵌套多个组件 子组件又有路由导航和路由容器 <router-link to="/父路由的地址名字 ...

  4. Vue.js的路由之——vue-router快速入门

    直接先上效果图 这个单页面应用有两个路径:/home和/about,与这两个路径对应的是两个组件Home和About. 整个实现过程 JavaScript 创建组件:创建单页面应用需要渲染的组件 创建 ...

  5. vue.js 二 路由懒加载

    当项目小的时候,我没考虑要去找这个得解决方案,也幸好现在几乎能迁移的项目都整合在了一个vue的项目里面 才发现编译后的vendor.js变得异常的大,而且几乎在项目每一个页面都需要加载这一个js,项目 ...

  6. vue.js关于路由的跳转

    1.路由demo示例 <div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 route ...

  7. vue.js中路由传递参数

    知识点:vue路由传递参数,第二个页面(A.B页面)拿到参数,使用参数 方法一:使用 <router-link :to="{name:'edithospital',params:{hi ...

  8. Vue.js搭建路由报错 router.map is not a function，Cannot read property ‘component’ of undefined

    错误: 解决办法: 2.0已经没有map了,使用npm install vue-router@0.7.13 命令兼容1.0版本vue 但是安装完之后会出现一个错误: Cannot read prope ...

  9. 分享一个使用 vue.js 开发的网站

    点我 惠淘党 照着文档和google开发,只花了一个多星期.依赖包如下 { "name": "vue-htd", "version": &q ...

随机推荐

  1. 原生JS的Ajax

    转自:https://www.cnblogs.com/yufann/p/JS-Ajax.html 1.创建一个Ajax对象 非IE6浏览器:var obj = new XMLHttpReuqest() ...

  2. 快看Sample代码，速学Swift语言（2）-基础介绍

    Swift语言是一个新的编程语言,用于iOS, macOS, watchOS, 和 tvOS的开发,不过Swift很多部分内容,我们可以从C或者Objective-C的开发经验获得一种熟悉感.Swif ...

  3. java.util.ConcurrentHashMap (JDK 1.8)

    1.1 java.util.ConcurrentHashMap继承结构 ConcurrentHashMap和HashMap的实现有很大的相似性,建议先看HashMap源码,再来理解Concurrent ...

  4. 【Uva623】500！(高精)

    Description 求N! \(N \leq 1000\) Sample Input 10 30 50 100 Sample Output 10! 3628800 30! 265252859812 ...

  5. C:数据结构与算法之单链表

    单链表相对于顺序表比较难理解,但是比较实用,单链表的插入,删除不需要移动数据元素,只需要一个指针来寻找所需要的元素,还有一个大优点就是不浪费空间,当你想要增加一个结点可以申请(malloc())一个结 ...

  6. php-fpm开机启动

    php-fpm开机自动启动脚本 网上有各种版本的php-fpm开机自动启动脚本, 其实你编译后源目录已经生成自动脚本.不用做任何修改即用. cp {php-5.3.x-source-dir}/sapi ...

  7. 基于telegraf+influxdb+grafana进行postgresql数据库监控

    前言 随着公司postgresql数据库被广泛应用,尤其是最近多个项目在做性能测试的时候都是基于postgresql的数据库,为了确定性能瓶颈是否会出现在数据库中,数据库监控也被我推上了日程.在网上找 ...

  8. 2017双11海量数据下EagleEye的使命和挑战

    摘要: EagleEye作为阿里集团老牌的链路跟踪系统,其自身业务虽不在交易链路上,但却监控着全集团的链路状态,特别是在中间件的远程调用上,覆盖了集团绝大部分的场景,在问题排查和定位上发挥着巨大的作用 ...

  9. DCL的失效：现实与初衷的背离

    最近看了Brian Goetz写的一篇有关DCL的文章:Double-checked locking: Clever, but broken.( 2001年发表于JavaWorld上) 这篇文章讲述了 ...

  10. 20行JS代码实现贪吃蛇

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...