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. IDEA热部署（一）---解析关键配置。

    本编博客转载自:因为自己在研究热部署,包括热部署那些文件,部署实现的包括那些操作.这一块,所以这篇好博客. http://www.mamicode.com/info-detail-1699044.ht ...

  2. 开始连载啦～每周２更共11堂iKcamp课｜基于Koa2搭建Node.js实战项目教学（含视频）| 课程大纲介绍

  3. The Movie db (TMDB)的API申请

    在共享API TMDB中申请时,一只报错Application summary please elaborate on how you plan to use our API,我是用汉字描述的,开始以 ...

  4. Kafka+Storm写入Hbase和HDFS

    1.Storm整合Kafka 使用Kafka作为数据源,起到缓冲的作用 // 配置Kafka订阅的Topic,以及zookeeper中数据节点目录和名字 String zks = KafkaPrope ...

  5. http性能测试工具wrk源码学习之开篇

    1.前言 最近工作需要测试nginx反向代理的性能,于是找了一些http测试工具,例如经典的Apache的ab.siege.wrk.wrk使用多线程事件驱动方式,支持lua脚本扩展.关于wrk介绍可以 ...

  6. Java 硬件同步机制 Swap 指令模拟 + 记录型信号量模拟

    学校实验存档//.. 以经典的生产者消费者问题作为背景. 进程同步方式接口: package method; /** * P表示通过,V表示释放 */ public interface Method ...

  7. Find all factorial numbers less than or equal to N

    A number N is called a factorial number if it is the factorial of a positive integer. For example, t ...

  8. BOOTPROTO=[none|static|bootp|dhcp]（引导时不使用协议|静态分配|BOOTP协议|DHCP协议）

     BOOTPROTO=[none|static|bootp|dhcp](引导时不使用协议|静态分配|BOOTP协议|DHCP协议) 

  9. Java基础--二进制运算

    1. System.out.println((byte)0x8f); 结果是? 2.System.out.println((byte)(0xc5>>1)); 结果是? 3.System.o ...

  10. asp.net MVC里的 ModelState使用方法

    https://www.cnblogs.com/hohoa/p/5839993.html if (!ModelState.IsValid) { string error = string.Empty; ...