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>