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}} -> 数据
