vue.js之路由

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>

运行结果：

posted @ 2018-01-25 19:43 挨踢人啊阅读(137) 评论(0) 编辑收藏举报

刷新页面返回顶部

拼搏在互联网的世界

vue.js之路由