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. dataTables 使用整理

    官方网站:http://www.datatables.net/ 简介:DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HT ...

  2. Android打赏功能：支付宝转账

    适用于个人开发者开发的APP中,让用户打赏给作者,实质上进行支付宝转账到指定账号的功能. 一.打开'支付宝'APP ,点击'收款'功能 ,将收款码(二维码)图片保存到手机上(进一步移到电脑上). 二. ...

  3. JDBC中rs.beforeFirst()

    写在前面: 最近的项目比较老,用到了jdbc查询数据,展示数据.有时候一个查询语句的ResultSet需要用到好几次,即需要遍历好几次同一个查询结果集,那要怎么办呢? 使用如下方式即可解决 其实这里理 ...

  4. APP上传APP Store遇到的各种问题

    内容含敏感话题或对苹果不友好的信息(如苹果婊) 使用了友盟的统计SDK,获取了IDFA但是上传填写无广告 采用友盟IDFA的sdk,并用友盟的默认淘宝页面广告,被告知和产品内容不符(最近) App在i ...

  5. 如何给动态添加的form表单控件添加表单验证

    最近使用jQuery Validate做表单验证很方便,api地址为http://www.runoob.com/jquery/jquery-plugin-validate.html 但是在使用的时候也 ...

  6. php项目报错 Warning: session_start(): open(D:/software/wamp/wamp/tmp\sess_msrjot7f32ciqb1p2hr4ahejg4, O_RDWR) f

    今天一个php项目报错: Warning: session_start(): open(D:/software/wamp/wamp/tmp\sess_msrjot7f32ciqb1p2hr4ahejg ...

  7. css实现一行居中显示，两行靠左显示，超过两行以引号省略

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

  8. [编织消息框架][JAVA核心技术]动态代理应用6-设计生成类

    上篇介绍到rpc可以使用接口与实现类来约束书写 根据接口用javassist生成两个代理类 1.sendProxy 发送处理,调用方式可以是远程/本地 2.receiveProxy 接收处理,内部调用 ...

  9. 部署github开源软件遇到的问题

    jdk1.8源版本不一样: 将语言级别改为8,所有的jdk都配置为1.8 2. 遇到一些解析错误 应该是tomcat的jdk版本和项目的jdk版本不一样

  10. canvas（七） 文字编写

    /** * Created by xianrongbin on 2017/3/11. */ var dom = document.getElementById('clock'), ctx = dom. ...