路由

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.

xxx

yyy

注意：对应的路由匹配成功，将自动设置 class -> .router-link-active

    编程式导航：为声明式导航，router.push为编程式导航

    当点击时，router.push会在函数内部执行。

    1.router.push 向history栈添加一个新的记录。当用户点击浏览器后退按钮时，则回到之前的 url

    2.router.replace 和router.push不同，它不像history中添加新记录，替换掉当前的history记录

    3.router.go( n )，参数 n 是一个整数，在 history 记录中向前或后退多少步。（正数为向前，负数为后退）

3.渲染

  路由匹配到的组件渲染在这里

       

2. js

 1.组件：

 const foo = { template : '

foo

' };

 const bar = {template: '

bar

' }  ;

  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 一项。

路由命名

html页面

js文件中