6 VUE路由

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

vue-resouce 交互
vue-router  路由
根据不同url地址，出现不同效果
html:
        主页  跳转链接
        新闻
        展示的内容
js :
//1. 准备一个根组件    必须是跟组件
var App=Vue.extend();
//2. Home News组件都准备
var Home=Vue.extend({
    template:'
我是主页
'
});
var News=Vue.extend({
    template:'
我是新闻
'
});
//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:'我是登录信息'
        }
    },
    'reg':{
        component:{
            template:'我是注册信息'
        }
    }
}

路由其他信息:

//这样的路径  有时候不知道跳那个   是从后台传过来的
新闻001
新闻002
'news':{
    component:News,
    subRoutes:{
        '/detail/:id':{
            component:Detail
        }
    }
}
var Detail=Vue.extend({
    template:'#detail'
});

/detail/:id/age/:age  多值传送
{{$route.params | json}}    ->  当前参数
{{$route.path}} ->  当前路径
{{$route.query | json}} ->  数据