vue路由

1. 创建组件
   首先引入vue.js和vue-router.js 主要是router.js 不是resouce.js
   resouce.js是用来交互的
   安装# npm install vue-router –save-dev

<div id="box">
        <ul>
            <li>
            //在a元素上使用v-link指令跳转到指定路径。
                <a v-link="{path:'/home'}">HOME</a>
            </li>
            <li>
                <a v-link="{path:'/news'}">NEWS</a>
            </li>
        </ul>
        <div>
        //在页面上使用<router-view>标签，它用于渲染匹配的组件。
            <router-view></router-view>
        </div>  
    </div>

    <template id="home">  //两组件
        <h3>我是主页</h3>
        <div>
            <a v-link="{path:'/home/login'}">主页1</a>
            <a v-link="{path:'/home/reg'}">主页2</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>我是主页1</strong>'
                        }
                    },
                    'reg':{
                        component:{
                            template:'<strong>我是主页2</strong>'
                        }
                    }
                }
            },
            'news':{
                component:News,
                subRoutes:{
                    '/detail/:id':{
                        component:Detail
                    }
                }
            }
        });

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

        //6. 默认启动页面
        router.redirect({
            '/':'home'
        });
    </script>