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. spring -boot s-tarter 详解

    Starter POMs是可以包含到应用中的一个方便的依赖关系描述符集合.你可以获取所有Spring及相关技术的一站式服务,而不需要翻阅示例代码,拷贝粘贴大量的依赖描述符.例如,如果你想使用Sprin ...

  2. 你的Excel表格颜色搭配的对么？

    在昨天的文章中,我们讨论了<Excel表格制作的基本九大原则>,今天我们还要继续聊聊,Excel表格的颜色搭配规则. 一个表格的美丑与否,除了基本的格式之外,如何配色也是非常关键的,如果只 ...

  3. 排查程序死循环，死锁的方法 ——pstack

    pstack命令可显示每个进程的栈跟踪,pstack $pid即可,pstack命令须由$pid进程的属主或者root运行. 这次出现cpu占比100%的情况,但看memory占比,并无异常,怀疑是某 ...

  4. SpringMVC 返回json的两种方式

    前后台数据交互使用json是一种很重要的方式.本文主要探讨SpringMVC框架使用json传输的技术. 请注意,本文所提到的项目使用Spring 版本是4.1.7,其他版本在具体使用上可能有不一样的 ...

  5. verilog抓外部低频输入信号的上升沿和下降沿

    版权申明:本文为博主窗户(Colin Cai)原创,欢迎转帖.如要转贴,必须注明原文网址 http://www.cnblogs.com/Colin-Cai/p/7220107.html 作者:窗户 Q ...

  6. splay小结—植树结

    我要把高级数据结构当爸爸了... ...弱到跪烂了. splay,二叉搜索树的一种,具有稳定变形功能. 二叉搜索树:对于一个节点,都只有不超过2个孩子.其左子树内的点的权值都比这个点小,右子树的点的权 ...

  7. HDFS租约实践

    一.租约详解 Why租约 HDFS的读写模式为 "write-once-read-many",为了实现write-once,需要设计一种互斥机制,租约应运而生租约本质上是一个有时间 ...

  8. CPP--关于long的争议和思考

    先普及一下VS开发Linux的知识点 VS2017的安装:https://www.cnblogs.com/dunitian/p/8051985.html 创建项目在这 第一次运行的时候会让输入服务器信 ...

  9. centos 命令

    1.查看占用端口的进程 netstat -lnp|grep 3000(3000为端口号) Netstat 命令用于显示各种网络相关信息,如网络连接,路由表,接口状态 (Interface Statis ...

  10. 浏览器中的user-agent的几种模式

    服务器一般会根据访问的浏览器进行识别,针对不同浏览器才用不同的网站样式及结构,也是通过这个信息判断用户使用的平台模式(手机,pc或平板) 识别为手机一般有这几个关键字: "Windows P ...