6 VUE路由

vue-> SPA应用，单页面应用（引入vue-router.js）

vue-resouce 交互
vue-router  路由
根据不同url地址，出现不同效果
html:
        <a v-link="{path:'/home'}">主页</a>  跳转链接
        <a v-link="{path:'/news'}">新闻</a>
        <router-view><router-view>展示的内容
js :
//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({
    '/':'/news'，// 访问跟目录条转  那个
    '/aaa':'/home',//访问aaa的时候跳转home
});

路由嵌套(多层路由):

层级关系
主页  home
    登录  home/login
    注册  home/reg
新闻页 news
subRoutes:{//在Home关联里面写    subRoutes表示子路由的意思
    'login':{
        component:{
            template:'<strong>我是登录信息</strong>'
        }
    },
    'reg':{
        component:{
            template:'<strong>我是注册信息</strong>'
        }
    }
}

路由其他信息:

//这样的路径  有时候不知道跳那个   是从后台传过来的
<a v-link="{path:'/news/detail/001'}">新闻001</a>
<a v-link="{path:'/news/detail/002'}">新闻002</a>
'news':{
    component:News,
    subRoutes:{
        '/detail/:id':{
            component:Detail
        }
    }
}
var Detail=Vue.extend({
    template:'#detail'
});
<template id="detail">
    {{$route.params | json}}   //获取数据
</template>
/detail/:id/age/:age  多值传送
{{$route.params | json}}    ->  当前参数
{{$route.path}} ->  当前路径
{{$route.query | json}} ->  数据