http://jsfiddle.net/yyx990803/xgrjzsup/
建立路由
引入 vue.js 及 vue-router（npm方式）
impor vue from ‘ vue ’
import vueRouter from ‘ vue-router ’
vue.use( vueRouter );
const.router = new vueRouter( );
1. 建立单个路由：
router.map({
'/view-a' : { component : ViewA },
'/view-b' : { compinent : ViewB }
});
export default router; // 将路由导出
2.嵌套路由： / a / b
router.map({
' /a ' : { component : A ,
subRoutes:{
' /b ' : {
component : B
} } }
})
静态路由的使用
1. HTML
1.引入 vue.js 及 vue - router.js
2.<div>
<router-link to = "/foo"> xxx </router-link>
<router-link to ="/bar"> yyy </router-link>
注意：<router-link>对应的路由匹配成功，将自动设置 class -> .router-link-active
编程式导航：<router-link>为声明式导航，router.push为编程式导航
当点击<router-link>时，router.push会在函数内部执行。
1.router.push 向history栈添加一个新的记录。当用户点击浏览器后退按钮时，则回到之前的 url
2.router.replace 和router.push不同，它不像history中添加新记录，替换掉当前的history记录
3.router.go( n )，参数 n 是一个整数，在 history 记录中向前或后退多少步。（正数为向前，负数为后退）
3.渲染
<router-view></router-view> 路由匹配到的组件渲染在这里
</div>
2. js
1.组件：
const foo = { template : '<div> foo </div>' };
const bar = {template: '<div> bar </div>' } ;
2.路由：
const routes = [
{ path : '/foo' ,component : foo },
{ path : '/bar' ,compinent : bar}
]
3.渲染到页面上
const router = new VueRouter({ routers })
const app = new vue({ router }).$mount(" #app ");
路由命名
https://github.com/vuejs/vue-router/blob/next/examples/named-routes/app.js
如果需要通过命名的方式来识别一个路由，可以在routes配置中添加 name 一项。
