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. 「mysql优化专题」优化之路高级进阶——表的设计及优化（6）

    正文:表的设计及优化(真技术文) 优化①:创建规范化表,消除数据冗余 数据库范式是确保数据库结构合理,满足各种查询需要.避免数据库操作异常的数据库设计方式.满足范式要求的表,称为规范化表,范式产生于2 ...

  2. SpringBoot应用部署到Tomcat中无法启动问题

    SpringBoot应用部署到Tomcat中无法启动问题   背景 最近公司在做一些内部的小型Web应用时, 为了提高开发效率决定使用SpringBoot, 这货自带Servlet容器, 你在开发We ...

  3. 导入maven项目时出现 Version of Spring Facet could not be detected. 解决方法

    问题出现在: 导入maven项目的时候,其中,我的这个maven项目是由Spring,Struts2,Mybatis搭建的. 问题截图:  即Spring的版本不能被检测到.此时需要做的就是找到spr ...

  4. spring cloud eureka高可用

    记录下自己踩的坑 spring cloud eureka的高可用网上的教程大致分为两种,一种是两两互相注册,一种是三个互相注册. 1.两两互相注册 普通服务的注册写法都是http://peer1/eu ...

  5. Android Spinner值不显示,选择列表正常

    你在给adapter设置数据时,如果你是静态数据,也就是死数据,那么spinner显示没有问题,但是你如果异步进行网络请求,或者使用Volley请求的时候就要注意,你的adapter设置要在onRes ...

  6. 在Eclipse中创建Django项目

    在以前的分享中,我们是在命令行模式下创建Django项目的,那么,如何在IDE中使用Django呢? 本文将介绍如何在Eclipse中创建Django项目. 首先,新建Django项目mysite,如 ...

  7. java.util.ConcurrentHashMap (JDK 1.8)

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

  8. vue-router项目实战总结

    今天来谈谈vue项目{vue,vue-router,component}三大神将之一的vue-router.作为我们前后端分离很重要的实践之一,router帮我们完成了SPA应用间的页面跳转. 并且, ...

  9. 联想笔记本电脑 Z500除尘过程

    首先说明联想z500真的是特别难拆,主要是C面的键盘如果没有垫片的话很难拆下,建议准备好垫片再进行. 第一步 首先拆掉背面的五个螺丝钉,然后打开四个垫子注意方向,把隐藏的另外四个螺丝拆掉. 第二步 把 ...

  10. 【bird-java】bird-java概述

    bird-java是以dubbo为基础的分布式服务框架,专注于业务开发,提炼后台应用中的经典业务场景,大幅减少开发编码量. 技术选型 基础框架:spring 服务调度:dubbo web层:sprin ...