vue22 路由

<!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>
    </style>
</head>
<body>
<!--  
    vue-> SPA应用,单页面应用
    vue-resouce    交互
    vue-router    路由
    根据不同url地址,出现不同效果
    咱上课: 0.7.13版本
$ bower install vue-router#0.7.13  
-->

    <div id="box">
        <ul>
            <li>    
                <!--  href=""不能使用了 ,点击内容显示在router-view之中,-->
                <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({//Home是一个类
            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. 跳转,默认显示home
        router.redirect({
            '/':'/home'      //'/':'home'
        });
    </script>
</body>
</html>

 多层路由:

<!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点的时候会自动加这个样式*/
        .v-link-active{
            font-size: 20px;
            color: #f60;
        }
    </style>
</head>
<!--
路由嵌套(多层路由):
    
    主页    home
        登录    home/login
        注册    home/reg
    新闻页    news
-->
<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>
    </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':{
            /*
            data(){},
            methods:{},
            */
                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>
<!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/zns'}">登录</a>
            <a v-link="{path:'/home/reg/strive'}">注册</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}}  <!--获取:后面的值 params={'id':'001'}-->
        <br>
        {{$route.path}}  <!-- '/news/detail/002'-->
        <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/:name':{
                        component:{
                            template:'<strong>我是登录信息 {{$route.params | json}}</strong>'//获取:后面的值
                        }
                    },
                    'reg':{//先通过path找到component,然后找通过component找template,最后通过template找标签id页面,
                        component:{
                            template:'<strong>我是注册信息</strong>'
                        }
                    }
                }
            },
            'news':{
                component:News,
                subRoutes:{
                    '/detail/:id':{//id是path传过来的,
                        component:Detail
                    }
                }
            }
        });

        //5. 启动路由
        router.start(App,'#box');

        //6. 跳转
        router.redirect({
            '/':'home'
        });
    </script>
</body>
</html>

 

posted @ 2017-06-10 16:16  无天666  阅读(480)  评论(0编辑  收藏  举报